Web开发Ajax前台后台交互

麦子学院 web前端开发视频|网络前端开发需要教材|开发苹果软件前端语言

AJAX–前后台交互

注：ajax通过async参数决定是异步还是同步,false同步,true异步;

异步执行顺序是先执行后续动作，再执行success里代码;

同步是先执行success里代码，再执行后续代码;

1、(异步)方法调用，后续代码不需要等待它的执行结果

后台：

public static string GetStr(string str1, string str2)
{
return str1 + str2;
}

前台:

function Test(strMsg1,strMsg2) //
{
$.ajax({
type: “Post”, //以post方式与后台沟通

    url: "Demo.aspx/GetStr",              //与此aspx页面里的方法GetStr沟通

    async: true,                                    //异步
    //方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字
    data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",    //发给服务器的数据有两项str1和str2

    contentType: "application/json; charset=utf-8",      //发送信息至服务器时内容编码类型
    dataType: "json",                                                      //返回的值以 JSON方式 解释

    success: function(data) {
        //返回的数据用data.d获取内容
        alert(data.d);
    },
    error: function(err) {
        alert(err);
    }
});

//隐藏加载动画
$(“#pageloading”).hide();
}

2、(同步)方法调用，可用于需要得到返回值是执行后续代码的前提

后台：

public static string GetStr(string str1, string str2)
{
return str1 + str2;
}

前台:

function Test(strMsg1,strMsg2)
{

var str = “”;
$.ajax({
type: “Post”,
url: “Demo.aspx/GetStr”,
async: false,
//方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字
data: “{‘str1’:'”+strMsg1+”‘,’str2’:'”+strMsg2+”‘}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function(data) {
//返回的数据用data.d获取内容
str = data.d;
},
error: function(err) {
alert(err);
}
});

return str;

前后分离开发 前端页面|前端开发需要的代码编辑器|画pcb板还是做前端开发