javascript - 如何将数据从模态表单(JQUERY-UI)传递到mysql？

Question

我正在尝试将一些数据从模态表单(JQuery-UI)传递到 MySQL 数据库，并且我尝试使用 POST 方法执行 action=""但我的数据库中没有任何内容。 我在谷歌上搜索了前 3 页中的每个答案，但没有找到任何可以解决我的问题的内容。我将附上我的代码，以便您可以看到我的代码并纠正我。我使用的模式表单是关于新的客户端表单。我单击页面上的“添加客户端”按钮，然后打开一个弹出窗口(模式表单)，其中包含一些 html 输入，当我按下提交时，我想将该数据插入到我的数据库中。 谢谢!

模态表单代码:

<div  id="dialog-form" title="Add new client">

                        <form name="new_client" method="POST" action="addclient.php">
                         <fieldset>
                            <label for="name">First Name</label>
                            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
                            <label for="last">Last Name</label>
                            <input type="text" name="last" id="last" class="text ui-widget-content ui-corner-all">
                            <label for="address">Address</label>
                            <input type="text" name="address" id="address" class="text ui-widget-content ui-corner-all">
                            <label for="num">Nr. of Address</label>
                            <input type="text" name="num" id="num" class="text ui-widget-content ui-corner-all">
                            <label for="city">City</label>
                            <input type="text" name="city" id="city" class="text ui-widget-content ui-corner-all">
                            <label for="postal">Postal Code</label>
                            <input type="text" name="postal" id="postal" class="text ui-widget-content ui-corner-all">
                            <label for="state">State</label>
                            <input type="text" name="state" id="state" class="text ui-widget-content ui-corner-all">


<!-- Allow form submission with keyboard without duplicating the dialog     button -->
                            <input type="submit" method="POST"  name="insert-client" id="insert-client" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
(and the div tag here)

(以及以下结束标记)

AddClient.php

<?php

require_once('mysqli_connect.php'); 
if(isset('insert-client')){
    $f_name = $_POST['name'];
    $l_name = $_POST['last'];
    $address = $_POST['address'];
    $num = $_POST['num'];  
    $city = $_POST['city'];
    $postal = $_POST['postal'];
    $state = $_POST['state'];


    $query = "INSERT INTO clients(clientID, name, last, address, num, city, postal, state) VALUES (NULL, $f_name, $l_name, $address, $num, $city, $postal, $state)";

    mysqli_query($dbc, $query);
    mysqli_close($dbc);
}
?>

我还尝试将这行代码放在模态表单 javascript 的 head 标签上

$.post("addclient.php", $("new_client").serialize());

我在这里发布了 head 标签上的脚本代码来检查它

<script>
 $( function() {
  var dialog, form,

  // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
  emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
  name = $( "#name" ),
  last = $( "#last" ),
  address = $( "#address" ),
  num = $( "#num" ),
  city = $( "#city" ),
  postal = $( "#postal" ),
  state = $( "#state" ),
  allFields = $( [] ).add( name ).add( last ).add( address ).add( num ).add( city ).add( postal ).add( state ),
  tips = $( ".validateTips" );

function updateTips( t ) {
  tips
    .text( t )
    .addClass( "ui-state-highlight" );
  setTimeout(function() {
    tips.removeClass( "ui-state-highlight", 1500 );
  }, 500 );
}

function checkLength( o, n, min, max ) {
  if ( o.val().length > max || o.val().length < min ) {
    o.addClass( "ui-state-error" );
    updateTips( "Length of " + n + " must be between " +
      min + " and " + max + "." );
    return false;
  } else {
    return true;
  }
}

function checkRegexp( o, regexp, n ) {
  if ( !( regexp.test( o.val() ) ) ) {
    o.addClass( "ui-state-error" );
    updateTips( n );
    return false;
  } else {
    return true;
  }
 }


  function addUser() {
  var valid = true;
  allFields.removeClass( "ui-state-error" );

  valid = valid && checkLength( name, "name", 3, 16 );
  valid = valid && checkLength( name, "last", 3, 16 );
  valid = valid && checkLength( name, "address", 3, 16 );
  valid = valid && checkLength( name, "num", 3, 16 );
  valid = valid && checkLength( name, "city", 3, 16 );
  valid = valid && checkLength( name, "postal", 3, 16 );
  valid = valid && checkLength( name, "state", 3, 16 );

  if ( valid ) {
    $( "#clients tbody" ).append( "<tr>" +
      "<td>" + name.val() + "</td>" +
      "<td>" + last.val() + "</td>" +
      "<td>" + address.val() + "</td>" +
      "<td>" + num.val() + "</td>" +
      "<td>" + city.val() + "</td>" +
      "<td>" + postal.val() + "</td>" +
      "<td>" + state.val() + "</td>" +
      "</tr>" );
     dialog.dialog( "close" );

  }
  return valid;
 }

 dialog = $( "#dialog-form3" ).dialog({
  autoOpen: false,
  height: 680,
  width: 770,
  modal: true,
  buttons: {
    "Προσθήκη": addUser,
    Cancel: function() {
      dialog.dialog( "close" );
    }
  },
  close: function() {
    form[ 0 ].reset();
    allFields.removeClass( "ui-state-error" );
  }
});

form = dialog.find( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  addUser();
});



$( "#create-user3" ).button().on( "click", function() {
  dialog.dialog( "open" );
  });
 } );
</script>

Answer 1

试试这个方法

 $(document).ready(function(){
        $("#new_client").click(function(){
            var str = $("form").serializeArray();
            $.ajax({  
                type: "POST",  
                url: "http://example.com",  
                data: str,  
                success: function(value) {
                    // your logic
                }
            });
        });
    });

在您的代码中，您错过了调用“#new_client”