返回
数据
分类

必赢手机登录网址希望能给大家一个参考,其中用JQuery来写Ajax更是普遍

日期: 2019-11-18 00:15 浏览次数 : 107

使用ajax异步提交表单的几种方法总结,ajax异步

这里介绍三种常用的提交方式

方式一

手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器

$.ajax({ 
    type:'post',   
    url:'Notice_noTipsNotice', 
    data:'k1=v1&k2=v2...', 
    cache:false, 
    dataType:'json', 
    success:function(data){ 
    } 
  }); 

方式二

单序列化:$('#myform').serialize( ); 其返回值就是“k1=v1&k2=v2...”键值对形式,再发起异步请求即可。

function noTips(){ 
  var formParam = $("#form1").serialize();//序列化表格内容为字符串 
  $.ajax({ 
    type:'post',   
    url:'Notice_noTipsNotice', 
    data:formParam, 
    cache:false, 
    dataType:'json', 
    success:function(data){ 
    } 
  }); 
} 

方式三

使用jQuery Form插件提供的ajaxSubmit()函数

$('#myform').ajaxSubmit({
type: 'GET/POST',
url: 'xx.php',
dataType: 'json',
success: fn,
clearForm: true,
resetForm: true
}); 
//此函数会自动把选定的表单进行序列化并异步提交

必赢手机登录网址 ,以上这篇使用ajax异步提交表单的几种方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持帮客之家。

这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的“k1=v1k2=v2......

用Ajax提交数据到后台去处理,是非常常用的一种方法,其中用JQuery来写Ajax更是普遍,那么这种简单的基础,就必须要懂了。

提交方式一:手工收集数据,进行传输

来一段实际的代码

var var01 = 123412344;
var var02 = $('input').val();
var var03 = $('div').val();

$.ajax({
        url: '/index.php?controller=order&action=deal_func',    
         //对应后台的处理函数 function deal_func(){  //代码…  }

        type: 'post',

        data:"aaa="+var01+"&bbb="+var02+"&ccc="+var03,    //var01、var02、var03 是变量
        //如果是确定的数据,就全用引号包起来"aaa=2342"+"&bbb=52554"+"&ccc=23667"
        //至于 aaa、bbb、ccc 是自己起的名字,随便什么都好,你喜欢,不过在后台要对应上

        success:function(data){
            //成功从后台获得返回数据之后的处理
        }

    })

既然都写到这里,写上后台收集数据的代码或许更容易让人理解

 function deal_func(){
        $a = IReq::vars('aaa');
        $b = IReq::vars('bbb');
        $c = IReq::vars('ccc');
    //好了,你现在已经在后台获得了传过去的3个数据($a、$b、$c)了,耍去吧
}

提交方式二:表单序列化

这个就超级好用了,智能序列化数据为你以上手写的形式,返回 “k1=v1&k2=v2...” ,简单方便,不过 只适合于form表单项?(应该是吧。。)
注意:所有的表单项都要有name属性,并且值不要相同

上代码,页面 && 脚本

<body>

    <form>
        <input type="text" name="aaa">
        <input type="checkbox" name="aaa">
        <input type="textarea" name="ccc">
        <br>
        <br>
        <input type="button" class="butt" value="button">
    </form>

</body>

<script src="jquery-1.11.3.min.js"></script>
<script>

        var form_str1 = $('form').serialize();
        console.log(form_str1);

        $('.butt').click(function(){
            var form_str2 = $('form').serialize();
            console.log(form_str2);

            //序列化后直接用Ajax传输
            $.ajax({
                url: '/index.php?controller=order&action=deal_func',    
                type: 'post',
                data: form_str2,
                dataType:'json',
                success:function(data){
                        //成功从后台获得返回数据之后的处理
                }
            })

        })

</script>

1.什么都不输入

必赢手机登录网址 1

QQ截图20170906160219.png

控制台输出

必赢手机登录网址 2

QQ截图20170906160239.png

2.输入一些内容

必赢手机登录网址 3

QQ截图20170906160627.png

点击button控制台输出

必赢手机登录网址 4

QQ截图20170906160640.png