1.submit.php
$arr = $_POST;
$arr['msg']=1;
//echo $_POST['uname'];
echo json_encode($arr);
?>
2.index.html
Ajax表单提交插件jquery form$(function(){
var options = {
// target: '#output', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
resetForm: true,
dataType: 'json'
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind to the form's submit event
$('#my_form').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
var uname = $("#uname").val();
if(uname==""){
$("#msg").html("姓名不能为空!");
return false;
}
var age = $("#age").val();
if(age==""){
$("#msg").html("年龄不能为空!");
return false;
}
$("#msg").html("正在提交...");
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
$("#msg").html('提交成功');
var sex = responseText.sex==1?"男":"女";
$("#output").html("姓名:"+responseText.uname+" 性别:"+sex+" 年龄:"+responseText.age);
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
//alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
// '\n\nThe output div should have already been updated with the responseText.');
}
姓名:
性别: 男 女
年龄:
div id="output">