使用jQuery发送ajax - 北漂-少年

我们先看一下js的原生ajax

直接进入代码，我们先准备好servlet,之后不会改动，所以先看一下。

package cn.curry.servlet;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by Curry on 2017/3/16.
 */
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name=request.getParameter("name");
        if("admin".equals(name)){
            //打回浏览器  “已经注册”
            response.getWriter().write("Your Account Is Already Registered");
        }
        else{
            //可以注册
            response.getWriter().write("You Can Register This Account");
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

很简单的servlet页面，然后我们看前台jsp展示页面，我写的是发送post，请求。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript">
        function checkUser(){
            var value=document.getElementById("username").value;
            var url="RegisterServlet";
            var xhr;
            if(window.XMLHttpRequest){
                //非IE浏览器 Chrome 等
                xhr=new XMLHttpRequest();
            }else{
                //IE
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open('post',url,true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var content=xhr.responseText;
                    document.getElementById("msg").innerText=content;
                }
            }
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send("name="+value);
        }
    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>

简单改一下就可以实现发送get请求。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript">
        function checkUser(){
            var value=document.getElementById("username").value;
            var url="RegisterServlet?name="+value;
            var xhr;
            if(window.XMLHttpRequest){
                //非IE浏览器 Chrome 等
                xhr=new XMLHttpRequest();
            }else{
                //IE
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open('get',url,true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var content=xhr.responseText;
                    document.getElementById("msg").innerText=content;
                }
            }
          
            xhr.send(null);
        }
    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>

接下来看jQuery的，简单了很多。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
    <script type="text/javascript">
        function checkUser() {
            var value=document.getElementById("username").value;
            $.ajax({
                url : "RegisterServlet",
                type : "GET",
                data : "name="+value,
                dataType : "text",
                success : function(result){
                    document.getElementById("msg").innerText=result;
                },
                error:function () {
                    document.getElementById("msg").innerText=result;
                }

            });
        }

    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>

发送post请求直接把get改为post就可以了。这里就不做赘述了。

当然除了$.ajax jQuery还提供了$.get()，$.post(),$(select).load等方法。以上方法用法和$.ajax()语法并没有不同，是对$.ajax()的封装，但是$.ajax()更灵活，通常使用$.ajax()可以完成我们的开发。所以你懂得，以上略作了解就好。

posted on 2017-03-18 16:33 北漂-少年阅读(271) 评论(0) 收藏举报

刷新页面返回顶部