我有jQuery UI的演示形式,如下所示。如何通过ajax将数据提交到名为add.html.php的页面?
式
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
脚本
<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.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>
HTML
<div class="demo">
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" 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="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">Create new user</button>
</div><!-- End demo -->
<div class="demo-description">
<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
答案 0 :(得分:1)
在form
中,添加提交的输入类型:
<input type='submit' value='submit' />
或者,您也可以创建一个提交表单的函数:
function fncSubmit() {
$('form').trigger('submit');
}
在ready
块中添加:
$('form').submit(function() {
$.ajax(
{
type: 'POST',
url: 'add.html.php',
data: $(this).serializeArray(),
success: function(data, textStatus, jqXHR)
{
//code
},
error: function(jqXHR, textStatus, errorThrown)
{
//code
}
});
});
答案 1 :(得分:0)
首先,您需要为表单提供一个ID并为其提供一种提交方式。 (本例中的按钮)
<form name="loginForm" id="loginForm">
//Inputs
<button type="button" id="submitButton">Submit</button>
</form>
然后,您将要在按钮上抛出一个单击事件,以将表单提交给ajax调用。
$('button#submitButton').click(
function()
{
$.ajax(
{
type:"POST",
url:"add.html.php",
data: $('#loginForm').serialize(),
success: function(message)
{
//code to execute if the ajax doesn't throw an error
},
error: function(jqXHR, textStatus, errorThrown)
{
//code to execute if the ajax does throw an error
}
});
});