2008-7
22
我是一个JS挫人，所以这篇也难免会有不对的地方，如有不对的地方，还请指出，THX
对于JQ的Ajax提交，JQ本身是没有办法的。不过还好我们有不计其数的插件～
我们首先下载form.js这个JQ的插件，然后我们就可以开工了
- // prepare the form when the DOM is ready
- $(document).ready(function() {
- var options = {
- target: '#output1', // target element(s) to be updated with server response
- beforeSubmit: showRequest, // pre-submit callback
- success: showResponse // post-submit callback
- };
- $('#myForm2').submit(function() {
- $(this).ajaxSubmit(options);
- //永远都return false以避免浏览器标准的subimit和页面导航引起的错误
- return false;
- });
- });
- // pre-submit callback
- function showRequest(formData, jqForm, options) {
- //formData是一个Form元素的数组，jqForm是一个JQuery对象，要用它对form元素操作使用var element1 = jqForm[0]
- var queryString = $.param(formData);
- alert('About to submit: \n\n' + queryString);
- //如果返回false的话，则可以阻止form提交，否则，允许提交
- return true;
- }
- // post-submit callback
- function showResponse(responseText, statusText) {
- //statusText为执行成功后的状态，responseText为我们提交Form之后返回的字符串，也就是action="abc.php"中提交之后abc.php返回的字符串
- alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
- '\n\nThe output div should have already been updated with the responseText.');
- }
稍微解释一下
options定义了我们在ajaxSubmit的参数，其中
- target: '#output2',
给我们定义了ajax请求完成之后内容需要更改的div的id
而beforeSubmit和success则分别定义了ajax请求完成前和完成之后需要执行的回调操作。
下面定义的两个function就是对于回调操作的定义。
对于页面提交文件abc.php我们定义如下
- echo "Ajax Success";
对于HTML部分，简单
- <div id="output1">Hello,World</div>
我们页面被成功的Ajax条之后，这段代码就会变成我们预先设定的那样,也就是变成了
- <div id="output1">Ajax Success</div>
还没有任何评论。