欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jqueryajax简介

程序员文章站 2022-07-07 21:20:26
前言: 前面学了基础的ajax感觉繁琐的真的就只想粘贴复制一键到位,本想着实现一个省市二级联动的功能,google了一下代码,真的是跟裹脚布一样又臭又长,就光那提取元素数据,创建...

前言:

前面学了基础的ajax感觉繁琐的真的就只想粘贴复制一键到位,本想着实现一个省市二级联动的功能,google了一下代码,真的是跟裹脚布一样又臭又长,就光那提取元素数据,创建元素,添加数据就看的烦人。
还好之前学过jquery,知道它是可以完美地封装javascript的操作,果然嘿真简单。
本来三十来行的创建ajax连接获取后台数据,就给我一行代码压缩,真的是越发展越简单。

我是直接看这个的:很好理解

链接:runoob

注意下:

get可能得到的是缓存数据
post每次都随着请求提交到后台,所以没有数据残留浏览器

get一般都是得到txt之类的文本数据,是单方面的
而post是为了提交数据到后台进行交互操作,是双方面的

要使用jquery首先得加载它:

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

jquery一般有三种方式的ajax:

第一种:load,从服务器加载数据,并把返回的数据放入被选元素中

<script type="text/javascript">
$(document).ready(function(){
    $("#mybutton").click(function(){
        $("#myp").load("haha.txt",function(responsetxt,statustxt,xhr){
            if(statustxt=="success"){
                alert("成功");
            }
            if(statustxt=="error"){
                alert("失败:"+xhr.status+":"+xhr.statustxt);
            }
        });
    });
})
</script>
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,  
加载到指定的 

元素中: 实例: $("#p1").load("demo_test.txt #p1");

第二种:get方式:

$(document).ready(function(){
    $("#mybutton").click(function(){
        $.get("haha.txt",function(data,status){   
            alert(data+":"+status);
        });
    });
});

第三种:post方式:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.get("/json/jsonservlet", {
                name:"我是谁",
                age:12
            }, function(data, status) {
                alert(data + ":" + status);
            });
        });
    });
</script>

post要和后台servlet交互:

response.setcharacterencoding("utf-8");
        system.out.println(request.getparameter("name"));
        system.out.println(request.getparameter("age"));
        response.getwriter().println("你找到我了");

后台输出:

我是谁
12

要访问后台servlet也可以直接如此写地址:

$.get("jsonservlet",