17.09 Ajax异步提交基础

用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属性,并且值不要相同

上代码,页面 && 脚本


    
    


1.什么都不输入

QQ截图20170906160219.png

控制台输出
QQ截图20170906160239.png

2.输入一些内容
QQ截图20170906160627.png

点击button控制台输出
17.09 Ajax异步提交基础_第1张图片
QQ截图20170906160640.png

你可能感兴趣的