当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于ajax及jQurey实现局部刷新过程解析

基于ajax及jQurey实现局部刷新过程解析

2020年06月23日  | 移动技术网IT编程  | 我要评论

1、jqurey使用时需导入jquery-1.4.2.js在web文件夹下

并在写script时需像如下定义script标签：

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

2、jqurey的语法：通过$(要选取的元素)

定义响应ajax的servlet

string buttonname=request.getparameter("buttonname");
    jsonobject jsobject =null;    //定义一个要返回的的数据
    if (buttonname.equals("button_1")){
      jsobject=new jsonobject("{first:\"傻子\",second:\"傻子\",third:\"傻子\"}"); //以键值对方式存储

    }
    if (buttonname.equals("button_2")){
      jsobject=new jsonobject("{first:\"傻女\",second:\"傻女\",third:\"傻女\"}");

    }
    if (buttonname.equals("button_3")){
      jsobject=new jsonobject("{first:\"傻佬\",second:\"傻佬\",third:\"傻佬\"}");

    }
    response.getoutputstream().write(jsobject.tostring().getbytes("utf-8")); //通过respon.getoutputstream获取输出流 将数据传回jsp页面
  }

ajax使用形式如下：

$.ajax({
    url:"/ajax_war_exploded/clickservlet", //定义需转到的servlet
    type:"post",　　　　　　　　　　　　　　　　//定义提交的形式
    data:{　　　　　　　　　　　　　　　　　　　//定义要传递的数据，以键值对形式存储
     buttonname:"button_2"
    },　　　　　　　　　　　　　　　　　　　　　//每个ajax都会让servlet回传一个数据
    datatype:"json",　　　　　　　　　　　　　//定义回传数据的类型
    success:function(result){　　　　　　　//ajax收到回传的数据是会触发的事件success
     var first=result.first;
     var second=result.second;
     var third=result.third;
     $(".first")[0].innerhtml=first;　　　　//该形式使用了jquery获取html元素
     $(".second")[0].innerhtml=second;
     $(".third")[0].innerhtml=third;
    }
   })
  })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网