我正在制作一个用于注册新用户和管理员的弹出窗体。用户将转到new.php。该网站包含表格形式的现有用户列表和“创建新用户”按钮。单击“创建新用户”按钮，它将显示一个弹出窗体。提交表单后，页面将刷新自身并更新现有用户表。
要做到这一切，我正在使用jQuery ui模态表单演示。
作为演示，它工作正常。但是演示没有保存数据。每次页面刷新，提交的数据都会消失。它没有去数据库。如何将数据传递到数据库？
new.php（对话框）
<script type="text/javascript">
$(function() {
var name = $( "#name" ),
tel = $( "#tel" ),
email = $( "#email" ),
username = $( "#username" ),
password = $( "#password" ),
allFields = $( [] ).add( name ) .add( tel ) .add( email ) .add( username ) .add( password ),
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;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 600,
width: 450,
modal: true,
buttons: {
"Create": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( name, "name", 3, 80 );
bValid = bValid && checkLength( tel, "tel", 10, 11 );
bValid = bValid && checkLength( email, "email", 6, 80 );
bValid = bValid && checkLength( username, "username", 4, 20 );
bValid = bValid && checkLength( password, "password", 5, 16 );
bValid = bValid && checkRegexp( name, /^([a-zA-Z ])+$/, "Name may consist of a-z, space only." );
bValid = bValid && checkRegexp( tel, /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/, "eg. 012-976-9422" );
bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
bValid = bValid && checkRegexp( username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + tel.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + username.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
Cancel: function() { $( this ).dialog( "close" ); }
},
close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); }
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
</head>
new.php（表格和表格）
<!--BUTTON-->
<button id="create-user">Create new user</button>
<!--DIALOG FORM-->
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Full Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label for="tel">Phone Number</label>
<input type="tel" name="tel" id="tel" class="text ui-widget-content ui-corner-all"/>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
<label for="name">Username</label>
<input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
Admin
<input id="radio1" name="admin" type="radio" class="radio-btn" value="admin" />
User
<input id="radio2" name="user" type="radio" class="radio-btn" value="user" />
<script type="text/javascript" defer="defer">
<!--
if(document.getElementById){
if (option1 != ""){
// Radiobutton "No" should be selected.
document.getElementById('radio1').checked = false;
document.getElementById('radio2').checked = true;
}
else if (option2 != ""){
// Radiobutton "Yes" should be selected.
document.getElementById('radio1').checked = false;
document.getElementById('radio2').checked = true;
}
}
// -->
</script>
</fieldset>
</form>
</div>
<!--TABLE-->
<div id="users-contain" class="ui-widget">
<p style="float:left;">Existing Users:</p>
<br />
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th width="26%">Nama</th>
<th width="14%">No. Telefon</th>
<th width="25%">Email</th>
<th width="19%">Username</th>
<th width="16%">Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>0123456789</td>
<td>john.doe@example.com</td>
<td>john89</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：1)
您尚未发布ajax代码以提交表单。请发布。 在创建时，您刚刚添加了“tr”元素，在此代码之后或之前没有ajax
$( "#users tbody" ).append("<tr>"+.....+"</tr>")