Ajax如何交互Action

2025-10-09 01:44:29

1、它是jQuery底层的ajax实现,通过HTTP请求加载页面数据。

1、$.ajax({ 

      type: "",

      url: "",

      data: , 

      async: ,

      dataType:"",

      success: function(returnedData) { 

            }, 

      error: function(e) { 

           } 

     });

例子如图:

Ajax如何交互Action

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();//结束

          }

      }

Ajax如何交互Action

1、<action 

   name="ajaxRequest"   //action的名字,用于匹配URL

   class="com.test.TestAction"  //Action实现类的完整类名

   method="ajaxRequest"   // 执行Action类时调用的方法

   >   

</action>

Ajax如何交互Action

2、参数介绍:

属性      是否必设         说明

name        是              action的名字,用于匹配URL

class          否             Action实现类的完整类名

method     否             执行Action类时调用的方法

convert      否             应用于action的类型转换的完整类名

Ajax如何交互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();

}

Ajax如何交互Action

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;

}

Ajax如何交互Action

2、后台代码:

using System.Web.Script.Services;  

         public static String Text(String x, String y)  {  

                   return x + y;  

3、注意:方法传参的参数数要与后台一致,并且区分大小写,不能为数组等。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢