韦德国际1946英国 > 计算机网络 > 计算机网络:ajaxSubmit使用讲解,异步提交表单的

原标题:计算机网络:ajaxSubmit使用讲解,异步提交表单的

浏览次数:60 时间:2019-07-06

ajaxForm无法交到表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行打算。提交动作必须由submit初叶 

<form id="myForm" method="post" action="/Home/AjaxForm">
<div>
Name:<input id="username" name="username" type="text" />  
Password:<input id="password" name="password" type="text" />
<br />
<input type="submit" value="submit async" id="lnkSubmit" />
</div>
</form>

Jquery.Form 异步提交表单的简约实例

 那篇作品主要介绍了Jquery.Form 异步提交表单的粗略实例。需求的相爱的人可以回复参照他事他说加以考察下,希望对大家享有扶助

 

  1. 在你的页面里写多少个表单。一个平淡无奇的表单,无需另外异样的号子:

 

 代码如下:

<form id="myForm" method="post" action="/Home/AjaxForm">

<div>

Name:<input id="username" name="username" type="text" />  

Password:<input id="password" name="password" type="text" />

<br />

<input type="submit" value="submit async" id="lnkSubmit" />

</div>

</form> 

 

在未曾Jquery.Form组件的时候,提交表单,页面会进来阻塞形式,等待服务器端的响应。

 

  1. 引进jQuery和Form Plugin Javascript脚本文件同临时候增添几句轻易的代码让页面在DOM加载成功后初始化表单:

 

<head>     

<script type="text/javascript" src="path/to/jquery.js"></script>     

<script type="text/javascript" src="path/to/form.js"></script>      

<script type="text/javascript">         

// wait for the DOM to be loaded         

$(document).ready(function() {             

// bind 'myForm' and provide a simple callback function             

// 为myform绑定ajaxForm异步提交事件,并提供贰个总结的回调函数。            

$('#myForm').ajaxForm(function() {                 

alert("Thank you for your comment!");             

});         

});     

</script> 

</head> 

增加jquery.form组件后,提交表单时,页面不会再同台交付,而是由js做异步提交,由此交到后页面不会有刷新。

 

  1. 出席能够与服务器端举行交互的回调函数。

 

 代码如下:

$(document).ready(function () { 

     //options是八个ajaxForm的计划对象。?

     var options = { 

        //target: '#output1',   // target element(s) to be updated with server response  

        //beforeSubmit: showRequest,  // pre-submit callback  

       <FONT color=#ff0000> success: callBackFunc  // post-submit callback</FONT>  

 

        // 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 form using 'ajaxForm'  

    $('#myForm').ajaxForm(options); 

});  

 

 // responseText是服务端的响应值。statusText是页面 

 

 // 提交状态值,success表示成功。 

function callBackFunc(responseText, statusText) { 

    if (statusText == 'success') { 

        alert(responseText); 

    } 

 

 else{ 

 

 alert(“服务端错误!”); 

 

      } 

 

一经回到的是json数据则回调函数能够这么写 

function resultFunction(responseText,statusText) { 

        if (statusText == 'success') { 

            if (responseText.code == 1) { 

                alert(responseText.message); 

            }  

            else { 

                alert('error occurs!'); 

            } 

        } 

        else { 

            alert('服务器错误!'); 

        } 

    } 

 

 

服务端的代码如下:

 代码如下:

[HttpPost] 

public ActionResult AjaxForm(FormCollection form) 

    string message = "Name:" form["username"] " PWD: " form["password"]  ; 

    //return Content(message); 

    return Json(new { code = 1, message = message }); 

 

  1. 投入提交前的数额校验函数 

为options对象增加 beforeSubmit属性

代码如下:

var options = { 

                //target: '#output1',   // target element(s) to be updated with server response  

                <FONT color=#ff0000>beforeSubmit: checkData,  // pre-submit callback  

</FONT>                success: callBackFunc  // post-submit callback  

 

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

            }; 

 // pre-submit callback  

       function checkData(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: nn' 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; 

           if ($(formElement).find("#username").val() == "") { 

               alert("please enter username!"); 

               return false; 

           } else { 

               return true; 

           } 

       } 

 

评释用户名是不是为空,是则提醒输入,并打消表单提交。

 

异步提交表单的简练实例 那篇文章首要介绍了Jquery.Form 异步提交表单的轻巧实例。须求的相恋的人能够回复仿照效法下,希望对大家拥有帮...

$('#ca88手机版登录入口 ,testForm').ajaxSubmit(ajax_option);

你大概感兴趣的篇章:

  • jquery.form.js异步提交表单详解
  • JQuery异步提交表单与公事上传功用示例
  • jQuery异步提交表单的三种方法
  • Jquery异步提交表单代码分享
  • jquery下异步提交表单 异步跨域提交表单
  • jQuery异步提交表单实例

url:"login",//默认是form action

复制代码 代码如下:

<script type="text/javascript">

2 使用方式

 else{

1 ,引进正视脚本

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

在平昔不Jquery.Form组件的时候,提交表单,页面会跻身阻塞格局,等待服务器端的响应。

var options = {
                //target: '#output1',   // target element(s) to be updated with server response 
                <FONT color=#ff0000>beforeSubmit: checkData,  // pre-submit callback 
</FONT>                success: callBackFunc  // post-submit callback 

服务端的代码如下:

版权评释:本文为博主原创文章,未经博主允许不得转发。

复制代码 代码如下:

success:function(data){

                // $.ajax options can be used here too, for example: 
                //timeout:   3000 
            };
 // pre-submit callback 
       function checkData(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);

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:计算机网络:ajaxSubmit使用讲解,异步提交表单的

关键词: 韦德官网登陆

上一篇:学习笔记

下一篇:没有了