ajax入门的一些基本用法

最新推荐文章于 2024-07-21 17:13:47 发布

这条路黑到底

最新推荐文章于 2024-07-21 17:13:47 发布

阅读量447

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/chaplinlong/article/details/52139037

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本篇文章，说说ajax的写的几种情况。
最原始的写法。

<script type="text/javascript">
        function test(){
        var xmlHttpRequest=null;
        if (window.XMLHttpRequest) {
            xmlHttpRequest=new XMLHttpRequest();
        }else{
            //IE5和6
            xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttpRequest.onreadystatechange=callBack;
        var name=$.trim($("#uname").val());
        if(name==null||name.length==0){
            $("#my").html("用户名为空");
            return;
        }else{
            var url="confirm1.jsp?name="+name;

        }
        xmlHttpRequest.open("GET", url, true);
        xmlHttpRequest.send(null);
        $("#my").html("");
        function callBack(){
            if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200) {
                var result=xmlHttpRequest.responseText;

                if(result==1){
                    result="用户名已经存在";
                }else{
                    result="用户名OK";
                }           
                $("#my").html(result); 
            }

        }
        }
    </script>

    </head>

  <body>

            用户名:<input type="text" id="uname" name="uname" onblur="test();">
            <span id="my"></span>


  </body>

请求的验证页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String name=request.getParameter("name");
    if("accp".equalsIgnoreCase(name)){
        out.print("1");     
    }else{
        out.print("ok！");
    }
%>

换成post写法，注意了，上面的result 过去后再判断，是为了反正中文的乱码。

<script type="text/javascript">
        function test(){
        var xmlHttpRequest=null;
        if (window.XMLHttpRequest) {
            xmlHttpRequest=new XMLHttpRequest();
        }
        xmlHttpRequest.onreadystatechange=callBack;
        var name=$("#uname").val();
        var url="confirm.jsp?name="+name;
        xmlHttpRequest.open("POST", url, "true");
        xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttpRequest.send(name);
        function callBack(){
            if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200) {
                var result=xmlHttpRequest.responseText;
                $("#my").html(result);
            }   
        }
        }
    </script>

继续优化上面代码。

    <script type="text/javascript">
        function test(){
        var name=$("#uname").val();
        $.ajax({
            url:"confirm.jsp?name="+name,
            type:"GET",
            dataType:"text",
            success:function(result){
                $("#my").html(result);
            },
            error :function(){
                alert("请求有错误！");
            }

        });

    }
    </script>

继续修改上面的代码。

    <script type="text/javascript">
        function test(){
        var name=$("#uname").val();
        $.ajax({
            url:"confirm.jsp?name="+name,
            type:"POST",
            dataType:"text",
            success:function(result){
                $("#my").html(result);
            },
            error :function(){
                alert("请求有错误！");
            }

        }); 
    }
    </script>

当然上面可以改成， $.post(),或者$ .get().
说一下获取值的去两头空的方法。

var name=$.trim($("#uname").val());

说一下jQuery的each。注意，是dom对象。

jQueryeach(callback)
$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });
$("div").each(function (index, domEle) {

在:ObjectjQuery.each(object, [callback])时，不一样。如。

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});
//这时n是对象。

说一下json，（jsonp先不说，跨域的问题）。
同之前ajax，知识datatype：“JSON”，
简写：$.getJSON.
解析JSON字符串的方法。
如：

function test(){
        var jsonStr='{"name":"1","age":20}';
        var person=$.parseJSON(jsonStr);
        //alert(person);
        alert(person.name);
        }

说一下json的两类包。
1。json-lib包。这个包需要组合使用
这里写图片描述

//使用很简单，当然也可以进去看其他方法
JSONArray ja = JSONArray.fromObject(user);
out.print(ja);

2.fastjson 包，只要一个。很好用。

 String jsonStrng = JSON.toJSONString(object);
 //fastjson 解析json字符串为四种类型
  1. JavaBean

          Person person = JSON.parseObject(jsonString, Person.class);

      2. List<JavaBean>

          List<Person> listPerson =JSON.parseArray(jsonString, Person.class);

      3. List<String>

          List<String> listString = JSON.parseArray(jsonString, String.class);

      4. List<Map<String,Object>>

          List<Map<String, Object>> listMap = JSON.parseObject(jsonString, new TypeReference<List<Map<String,Object>>>(){});

注意，Map麻烦点：new TypeReference。

这条路黑到底

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax入门的一些基本用法

本篇文章，说说ajax的写的几种情况。最原始的写法。<script type="text/javascript"> function test(){ var xmlHttpRequest=null; if (window.XMLHttpRequest) { xmlHttpRequest=new XMLHttpRequest(
复制链接

扫一扫

专栏目录