ajax 和 jQuery的ajax

最新推荐文章于 2024-08-09 17:26:52 发布

逗比程序猿^_^

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量148

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/qq_45085954/article/details/102412735

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery的ajax

jQuery 底层 AJAX 实现。简单易用的高层实现get和post方法等。$.ajax() 返回其创建的XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

常用参数

contentType:(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数情况。
data:发送到服务器的数据
dataType:预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。
“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意：’’'在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串
success：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等...
    this; // 调用本次AJAX请求时传递的options参数
}

type：(默认: “GET”) 请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url：(默认: 当前页地址) 发送请求的地址。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的ajax请求</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <input type="button" value="ajax的请求ajax" onclick="click1()">
    <input type="button" value="ajax的请求get|post" onclick="click2()">
    <input type="button" value="ajax的请求json" onclick="click3()">
    <script type="text/javascript">
        function click1() {
            //url:请求的地址
            //type : get post
            //data:提交的数据
            //dataType:服务器返回的数据类型  html json  xml
            //contentType:"application/x-www-form-urlencoded"  post有用
            //success：成功回调的函数
            $.ajax({
                url:"servlet1",
                type:"post",
                data:"username=zhangsan&age=20",
                //使用@ResponseBody注解时，可以省略
                dataType:"html",  
                contentType:"application/x-www-form-urlencoded",
                success:function (data) {
                    alert(data);
                },
                error:function (xhr, textStatus, error) {

                }

            });
        }
        
        function click2() {
            //$.get("servlet1","username=李四&age=30");
            $.post("servlet1",{"username":"李四","age":30},function (data) {
                alert(data);
            },"html");
        }
        
        function click3() {
            $.get("jsonservlet",function (data) {
                alert(data.name+" "+data.gender+" "+data.age);
            },"json");
        }
        
    </script>
</body>
</html>

ajax实例

function check_user_name(){
		var len = $('#user_name').val().length;
		var username = $('#user_name').val();
        var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
		if(len<5||len>20)
		{
			$('#user_name').next().html('请输入5-20个字符的用户名')
			$('#user_name').next().show();
			error_name = true;
		}
		else
		{
			$('#user_name').next().hide();
            $.post("/checkUsername","username="+username,function (data) {
                if(re.test(username)) {
                    $('#user_name').next().hide();
                    $('#user_name').next().html('输入的姓名不能为邮箱格式')
                    $('#user_name').next().show();
                    error_name = true;
                }
                if (data.msg == "error"){
                    $('#user_name').next().html('用户名已存在');
                    $('#user_name').next().show();
                    error_name = true;
                }
                if (data.msg == "ok") {
                    error_name = false;
                }
            });
			//error_name = false;
		}
	}