新手上路：Ajax异步网络请求上手

在此之前，我们先用Laravel定义一个简单的接口：

接口地址

<!--http://localhost/getUserInfo-->
Route::post('/getUserInfo','userController@getUserInfo');

接口参数

{
    userId // 用户ID
}

返回样例

{
    return_code // 返回代码
    return_msg // 提示信息
    data // 用户数据
}

控制器

<?php
namespace App\Http\Controllers; // 命名空间

use App\Http\Controllers\Controller; // 使用Controller

// userController
class userController extends Controller
{   
    // 获取用户信息
    public function getUserInfo()
    {   
        $userId = $_POST['userId'];
        
        if($userId == 1){
            // 定义假数据，假装是从数据库拿的...
            $data = ['$userId'=>$userId,userName'=>'Sam','userSex'=>'1'];
        }else{
            $data = '此用户不存在';
        }
        
        // 把结果以JSON格式返回       
        return response()->json(['return_code' => '111111', 'data' => $data,return_msg' => '请求成功']);
    }
}

原生JS调用

写法：
原生JS的Ajax写法这里只贴代码，了解下就好，毕竟有更好的解决方案

//先声明一个异步请求对象
var xmlHttpReg = null;
function ajax() {
    if (window.ActiveXObject) {//如果是IE
       xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
       xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
    }
    //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
    if (xmlHttpReg != null) {
       xmlHttpReg.open("get", "checknumber.php?type="+gametype+"&round="+gameroundno, true);
       xmlHttpReg.send();
       xmlHttpReg.onreadystatechange = doResult; //设置回调函数
    }
 }
//设定函数doResult()
function doResult() {
    if (xmlHttpReg.readyState == 4 && xmlHttpReg.status == 200) {//4代表执行完成
        document.getElementById("content").innerHTML = xmlHttpReg.responseText;
    }
}

JQuery调用

相关文档：

http://www.w3school.com.cn/jquery/ajax_ajax.asp

$.ajax({
    'url': 'http://localhost/getUserInfo',
    'data': {
        userId : 1,
    },
    'type': 'POST',
    'dataType': 'JSON',
    'beforeSend': function(){
        console.log('请求中...');
    },
    'complete': function(){
        console.log('请求完成...');
    },
    'success': function(resp){
        console.log('用户名：'+resp.data.userName);
    },
    'error': function(resp){
        console.log('请求失败');
    },
});