如何将数据从模态表单(JQUERY-UI)传递给mysql?

Question

我正在尝试将一些数据从模态形式(JQuery-UI)传递到MySQL数据库，我尝试了使用POST方法的操作="，但我的数据库没有任何内容。 我在谷歌上搜索了前 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)

(以及以下结束标记)

添加客户端.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 的头标签上

$.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">