Ajax如何交互Action
1、它是jQuery底层的ajax实现,通过HTTP请求加载页面数据。
1、$.ajax({
type: "",
url: "",
data: ,
async: ,
dataType:"",
success: function(returnedData) {
},
error: function(e) {
}
});
}
例子如图:
2、参数介绍:
type:请求方式,“POST”或者“GET”,默认为“GET”。
url:发送请求的地址。
data:要向服务器传递的数据,书写的形式主要为key:value,例如(id:1)。GET请求会附加到url后面。
async:默认true,true代表异步请求,false代表同步请求。
dataType:预期服务器返回的数据类型,可以不指定。有XML、JSON、HTML、Text等。
1、public void ajaxRequest() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//设置返回数据为html文本格式
response.setContentType("text/html;charset=utf-");
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter out =null;
try {
String ch = request.getParameter("ch");
//参数值是中文,需要进行转换
ch = new String(ch.getBytes("ISO--"),"utf-8");
//控制台输出
System.out.println("中文 : "+ch);
//业务处理
String resultData = "hello world";
out = response.getWriter();
out.write(resultData);
//如果返回json数据,response.setContentType("application/json;charset=utf-8");
//Gson gson = new Gson();
//String result = gson.toJson(resultData);//用Gson将数据转换为json格式
//out.write(result);
out.flush();
}catch(Exception e) {
e.printStackTrace();
}finally {
if(out != null) {
out.close();//结束
}
}
1、<action
name="ajaxRequest" //action的名字,用于匹配URL
class="com.test.TestAction" //Action实现类的完整类名
method="ajaxRequest" // 执行Action类时调用的方法
>
</action>
2、参数介绍:
属性 是否必设 说明
name 是 action的名字,用于匹配URL
class 否 Action实现类的完整类名
method 否 执行Action类时调用的方法
convert 否 应用于action的类型转换的完整类名
1、实例:验证同步时大量数据石,是否会出现传输卡顿的现象?
注意:ajax通过async参数的设置来决定数据传输是异步还是同步
异步处理的执行顺序是先执行后续动作,再执行success里代码;
同步处理的先执行success里代码,再执行后续代码;
这里我们以C#语言进行测试
1、前台代码:
function Test(str1,str2) {
$.ajax({
type: "Post",
url: "Text.aspx/Text",
async: true,
data: "{'x':'"+str1+"','y':'"+str2+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function(err) {
//返回错误信息
alert(err);
}
});
$("#pageloading").hide();
}
2、后台代码:
using System.Web.Script.Services;
public static String Text(String x, String y) {
return x + y;
}
3、注意:方法传参的参数数要与后台一致,并且区分大小写,不能为数组等。
1、前台代码:
function Test(str1,str2) {
var str
$.ajax({
type: "Post",
url: "Text.aspx/Text",
async: true,
data: "{'x':'"+str1+"','y':'"+str2+"'}",
contentType: "application/json; charset=utf-8",
//设置返回的数据类型为json
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function(err) {
//返回错误信息
alert(err);
}
});
return str;
}
2、后台代码:
using System.Web.Script.Services;
public static String Text(String x, String y) {
return x + y;
}
3、注意:方法传参的参数数要与后台一致,并且区分大小写,不能为数组等。