Javascript 如何将数据从模式表单（JQUERY-UI）传递到mysql？

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

模态形式代码：

<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)

我把脚本代码贴在头标签上，以检查它

<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>

$（函数（）{
变量对话框，窗体，
//从http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-邮件状态-%28类型=电子邮件%29
emailRegex=/^[a-zA-Z0-9.！$%&'*+\/=？^{124}-]+[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]）*/，
名称=$（“#名称”），
last=$（“#last”），
地址=$（“#地址”），
num=$（“#num”），
城市=$（“#城市”），
邮资=$（“#邮资”），
州=$（“#州”），
allFields=$（[]）。添加（姓名）。添加（上次）。添加（地址）。添加（数字）。添加（城市）。添加（邮政）。添加（州），
提示=$（“.validateips”）；
函数更新（t）{
提示
.文本（t）
.addClass（“ui状态突出显示”）；
setTimeout（函数（）{
removeClass（“ui状态突出显示”，1500）；
}, 500 );
}
函数校验长度（o、n、最小值、最大值）{
如果（o.val（）.length>max | | o.val（）.length

试试这个方法

 $(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”

更改输入类型submit to按钮，将表单id添加为“new_client”，并将jquery中的“new_client”替换为“#new_client”。不清楚所有JavaScript代码与HTML和PHP代码的关系。您是否通过AJAX提交此表单，而不仅仅是普通表单帖子？至少，

$（“新客户机”）

是不正确的。也许你的意思是

$（“form[name='new\u client']）

？还要注意，您的PHP代码对SQL注入是完全开放的，因此它可能会因为各种原因而失败。由于您没有检查mysqli_error（$dbc），所以无法确定。使用带有查询参数的预处理语句进行输入至少可以解决这个问题；我应该把“表格”换成其他东西吗？它不起作用。。。查看我的编辑，标题标签上有完整的javascript代码。你能检查一下吗？你在哪里使用了我的脚本？在标题标签和对话框表单的脚本标签内

<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>

 $(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
                }
            });
        });
    });