Ajax 的get请求post请求的简单应用

一、失去焦点事件的绑定

jsp

  <input id="username" name="username"><span id="msg"></span>

script

1.ajax 不匿名函数方式

  $("#username").blur(hei)
  function hei (){
    alert("11111")
  }

2.ajax 匿名函数方式

  $("#username").blur(function (){
    alert("11111")
  })

二、现在绑定一个ajax的get请求

1.格式

$.get(url,参数,function (data){},"类型");

1.1Servlet

@WebServlet("/CheckUser")
public class MyServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");//解决post中文乱码问题
        resp.setContentType("text/html;charset=UTF-8");//解决响应到前台中文乱码的问题
        String username = req.getParameter("username");
        System.out.println(username);

    }
}

1.2 get请求

 $.get(
            "${path}/CheckUser",
            username = $("#username").val(),
            function (data) {
                $("#msg").html(data)
            },
            "html"
        )

1.3和失去焦点函数绑定

 //2.ajax  不匿名方式
    $("#username").blur(hei)
    function hei() {
        $.get(
            "${path}/CheckUser",
            username = $("#username").val(),
            function (data) {
                $("#msg").html(data)
            },
            "html"
        )
    }

.

1.4后台判定并且响应数据

@WebServlet("/CheckUser")
public class MyServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");//解决post中文乱码问题
        resp.setContentType("text/html;charset=UTF-8");//解决响应到前台中文乱码的问题
        String username = req.getParameter("username");
        System.out.println(username);
        if (username.equals("root")){
            resp.getWriter().write("<a/><font color=red>用户名已存在</font></a>");
        }else {
            resp.getWriter().write("<a/><font color=green>看起来不错</font></a>");
        }
    }
}

三、来试一下post请求
就是把 $.get变成 $.post

  //2.ajax  不匿名方式
    $("#username").blur(hei)
    function hei() {
        $.post(
            "${path}/CheckUser",
            username = $("#username").val(),
            function (data) {
                $("#msg").html(data)
            },
            "html"
        )
    }

四、ajax请求通用格式
**dataType：**预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
注意：服务器端或者前端一端指定即可如果都有先考虑前端
**async：**是否异步请求，true-是，false-否 (默认是 true)

 //2.ajax  不匿名方式
    $("#username").blur(hei)

    function hei() {
        $.ajax({
            //请求资源路径
            url: "${path}/CheckUser",
            //是否异步
            async:true,
            //请求参数
            data:"username="+$('#username').val(),
            //请求方式
            type:"POST",
            //dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。 
            dataType:"text",
            //请求成功后调用的回调函数
            success:function (data) {
                //将响应的数据显示到span标签
                $("#msg").html(data);
            },
            //请求失败后调用的回调函数
            error:function () {
                alert("操作失败...");
            }
        })