【转】jquery ajax submit a form

最新推荐文章于 2024-09-14 09:05:06 发布

iteye_17228

最新推荐文章于 2024-09-14 09:05:06 发布

阅读量117

点赞数

分类专栏： AJAX 文章标签： Ajax jQuery json PHP XML ViewUI

本文链接：https://blog.csdn.net/iteye_17228/article/details/82007394

版权

AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

required : jquery.form.js

$(document).ready(function() {
     var options = {
         target:         'server.php',
         beforeSubmit:   showRequest,
         success:        showResponse
         //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
     };

     $('#htmlForm').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) {
     // formData is an array; here we use $.param to convert it to a string to display it
     // but the form plugin does this for you automatically when it submits the data
     var queryString = $.param(formData);

     // jqForm is a jQuery object encapsulating the form element.   To access the
     // DOM element for the form do this:
     // var formElement = jqForm[0];

     alert('About to submit: \n\n' + queryString);

     // here we could return false to prevent the form from being submitted;
     // returning anything other than false will allow the form submit to continue
     return true;
}

// post-submit callback
function showResponse(responseText, statusText)   {
     // 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.');
}

</script>
</head>
<body>
   <form id="htmlForm" autocomplete="on" method="post" action="r.aspx">
       <input type="submit" value="submit" />
    </form>

</body>
</html>