六、jquery里面的ajax

作者: lifeline张 | 来源:发表于2018-07-19 16:30 被阅读0次

六、jquery里面的ajax
Jquery Ajax 封装
Ajax实现登陆验证
ajax使用注意
jQuery
jQuery Ajax
jQuery学习笔记
【JavaWeb】jQuery对Ajax的支持
刘月林 | jQuery ajax - ajax() 方法
AJAX-全集

常用的方式有四种：
1、了解：jquery对象.load(url, params, function(数据){ });。
2、掌握：$.get(url, params, function(数据){}, type)：
发送get请求的ajax
url：请求的路径
params：请求的参数，参数为key\value的形式
function(数据){}：回调函数，参数就是服务器发送回来的数据。
type：返回内容的格式：xml,html,script,json,text,_default。
3、$.post(url, params, function(数据){}, type)，发送post请求的ajax。
4、理解：$.ajax([选项])，
选项的可选值：
url：请求路径
type：请求的方式
data：发送到服务器的数据
success：（function）成功以后的回调
error：（function）异常之后的回调
datatype：返回内容的格式：xml,html,script,json,text,_default。（经常使用json）
async：设置是否是异步请求

示例代码

jap代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            var url="/day15/jqueryAjax";
            //var params="username=张三";
            var params={"username":"张苏纳"};
            //load方式
            /* $(this).load(url,params,function(d){
                alert(d);
            }); */
            
            //get方式
            /* $.get(url,params,function(d){
                alert(d)
            }); */
            
            //post方式
            /* $.post(url,params,function(d){
                alert(d.msg);
            },"json"); */
            
            //ajax 方式
            $.ajax({
                url:url,
                type:"post",
                data:params,
                success:function(d){
                    alert(d.msg);
                },
                error:function(){},
                dataType:"json"
                
            });
        });     
    })
</script>
</head>
<body>
    <input type="button" id="btn" value="点我">
</body>
</html>

servlet代码：

package com.itheima.jquery_ajax;

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

/**
 * jquery的ajax
 */
public class JqueryAjaxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("请求方式:"+request.getMethod());
        
        //接受参数
        String username = request.getParameter("username");
        username=new String(username.getBytes("iso-8859-1"),"utf-8");
        System.out.println(username);
        
        //响应数据
        response.getWriter().print("success");
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        System.out.println("请求方式:"+request.getMethod());
        
        //接受参数
        String username = request.getParameter("username");
        System.out.println(username);
        //response.getWriter().print("success");
        
        //{"result":"success","msg":"成功"}
        String s="{\"result\":\"success\",\"msg\":\"成功\"}";
        
        //响应数据
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print(s);
    }

}