Ajax请求服务端的五种方式

简介: Ajax请求服务端的五种方式

@TOC
首先要引入jQuery

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

下载jQuery:https://jquery.com/download/

方式一 (一般方式)

框架:

$.ajax({
    url:“服务器地址“,
    type:”get“|"post",
    data:{请求数据},
    success:function(result,testStatus){
        //请求成功回调函数处理代码
    },
    error:function(xhr,errrorMessage,e){
        //请求失败回调函数处理代码
    }
});

实现

index.jsp

function register()
    {
            var $mobile = $("#mobile").val();
            
            $.ajax({
                url:"MobileServlet",
                请求方式:"post",
                data:"mobile="+$mobile, 
                success:function(result,testStatus)
                {
                    if(result == "true"){
                        alert("已存在!注册失败!");
                    }else{
                        alert("注册成功!");
                    }
                },
                error:function(xhr,errrorMessage,e){
                    alert("系统异常!");
                }


                });
                }
<body>
        手机:<input  id="mobile"/>
        <br/>
        <input type="button" value="注册" onclick="register()" />
        <span id="tip"></span>

</body>

Servlet (下同)

request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
            response.setContentType("text/html; charset=UTF-8");
            String mobile =  request.getParameter("mobile") ;
            //假设此时 数据库中 只有一个号码:18888888888    
            PrintWriter out = response.getWriter();
            if("18888888888".equals(mobile)) {

                 out.write("true");//servlet以输出流的方式  将信息 返回给客户端

            }else {

                out.write("false");

            }
            out.close(); 

方式二(Get方式)

框架

$.get(
服务器地址,
请求数据,
function (result){

},
预期返回值类型(string\xml)
);

2、代码实现

            $.get(
                    "MobileServlet",
                    "mobile="+$mobile,
                function (result){
                        if(result == "true"){
                            alert("已存在!注册失败!");
                        }else{
                            alert("注册成功!");
                        }
                }
                );

方式三(Post方式)

1、格式

$.post(
服务器地址,
请求数据,
function (result){

},
    "xml" 或 "json" 或 "text" 
);

2、代码实现

        $.post(
                "MobileServlet",
                "mobile="+$mobile,
            function (result){
                    if(result == "true"){
                        alert("已存在!注册失败!");
                    }else{
                        alert("注册成功!");
                    }
            },
            "text"
            );

方式四(Load方式)

1、格式

$(xxx).load(
服务器地址,
请求数据
);

load:将服务端的返回值  直接加载到$(xxx)所选择的元素中

2、代码实现

$("#tip").load(
                    "MobileServlet",
                    "mobile="+$mobile
            );

方式五(JSON方式)

1、格式

$.getJSON(
服务器地址,
JSON格式的请求数据,
function (result){

}

);
2、代码实现

        var student = {"name":"zs" ,  "age":23} ;
        var students =[
                
                {"name":"zs" ,  "age":23} ,
                {"name":"ls" ,  "age":24} ,
                {"name":"ww" ,  "age":25} 
                
        ];
        alert(students[1].name +"--" +students[1].age) ;
        
        $.getJSON(
                "MobileServlet",
                {"mobile":$mobile},
            function (result){//msg:true|false
                    alert(123);
                    if(result.msg == "true"){
                        alert("已存在!注册失败!");
                    }else{
                        alert("注册成功!");
                    }
            }

        );
        
相关文章
|
7月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
63 2
|
7月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
1月前
|
XML 前端开发 JavaScript
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
61 22
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
39 18
|
2月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
83 4
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
126 1
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
61 10
React技术栈-react使用的Ajax请求库实战案例
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
37 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。