html form回调函数,js 中的submit 回调函数

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