jQuery中$.ajax()方法的使用

$.ajax()方法实现同源数据请求

checkUsername.php

<?php

$username = $_GET["username"];

if($username == "admin"){
	echo "username exists";
}else{
	echo "username ok";
}

?>

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
</head>
<body>
<h1>注册界面</h1>
<form action="" method="get">
    用户名：<input type="text" name="username" id="username"/>
    <input type="button" value="验证用户名" id="btn">
    <span id="result"></span>
</form>

<script src="jquery-3.3.1.js"></script>
<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            var uName = $("#username").val();
            var obj ={
                url:"checkUsername.php",
                type: "get",
                data:{username:uName},
                dataType:"text",
                async:true,
                success:function(result){
                    $("#result").html(result);
                }
            };
            $.ajax(obj);
        });
    });
</script>
</body>
</html>

$.ajax()方法实现跨域请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度提示词</title>
</head>
<body>
<input type="text" id="keyword" placeholder="请输入关键字"/>
<input type="button" id="btn" value="查询"/>
<div class="box"></div>

<script src="jquery-3.3.1.js"></script>
<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            var keyWord = $("#keyword").val();
            var obj={
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                data:{wd:keyWord},
                dataType: "jsonp",
                jsonp:"cb",
                success:function(data){
                    var list = "<ul>";
                    for(var i=0; i<data.s.length; i++){
                        var temp = data.s[i];
                        list += "<li>"+temp+"</li>";
                    }
                    list += "</ul>";
                    $(".box").html(list);
                }
            };
            $.ajax(obj);
        });
    });
</script>
</body>
</html>

使用jQuery获取跨域数据：

必须：dataType:"jsonp"，

jsonp默认值是"callback",

jsonpCallback默认的值是以jQuery开头的字符串，这个字符串就是函数调用的名称。

jQuery中$.ajax()方法的使用

猜你喜欢