关于ajax:Ajax技术在Jquery中的应用

10次阅读

共计 1593 个字符,预计需要花费 4 分钟才能阅读完成。

jQuery 中的罕用的 ajax 函数

ajax(…)
get(…)
post(…)
getJSON(…)

jQuery 中罕用的 Ajax 函数利用案例

首先在客户端,新构建一个页面,在 <body> 中引入 jquery-min.js 文件

<fieldset>
    <legend>Jquery Ajax function</legend>
    <button onclick="doGet()">$.get(..)</button>
    <button onclick="doPost()">$.post(..)</button>
    <button onclick="doAjax()">$.ajax(..)</button>
    <button onclick="doLoad()">$.load(..)</button>
    <span id="resultId"></span>
    </fieldset>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    

1.get 函数利用

客户端

function doGet(){
 1. 申请 url
 let url ="/jquery/doAjaxGet";
 2. 申请参数
 let params="msg= hello everyone jiayouya"
 3 发送异步申请
 $.get(url,params,(rusult)=>{$("#resultId").html(result);
 });
}

服务端

@Controller
@RequestMapping("/jquery")
public class JQueryController {@RequestMapping("/doAjaxGet")
    @ResponseBody
    public String doAjaxGet(String msg) {
        // 将客户端传到服务端的字符串转换为大写,而后以字符串的模式响应给客户端
        return "Jquery get request result" + msg.toUpperCase();}
    }

2.post 函数利用

客户端

function doPost(){
 1. 申请 url
 let url ="/jquery/doAjaxPost";
 2. 申请参数
 let params="title=AAA&&id=10"
 3 发送异步申请
 $.post(url,params,(rusult)=>{$("#resultId").html(result);
 });
}

服务端



    @RequestMapping("/doAjaxPost")
    @ResponseBody
    public String doAjaxGet(String title,Integer id) {return "Jquery get request result" +title+"/"+id ;}

3.ajax 函数利用

客户端

function ajax(){
        //1 申请 url
        let url ="/jquery/doAjaxPost";
        // 2 申请参数
        let params="id=10&&title=AAA&&age=23";
        // 3 发送异步申请
        $.ajax({
        url:url,
        data:params,
        dataType:"json",
        async:true,
        success:(result)=>{$("#resultId").html(result);
        },
        error:function(xhr){console.log(xhr.statusText);
                $("#resultId").html(xhr.statusText)
        }
        })
}

4 load 函数利用

客户端

function doLoad(){
//1 申请 url
        let url ="/jquery/doAjaxGet";
        // 2 申请参数
        let params="msg= hello cgb teacher";
        // 3 发送异步
        $("#resultId").load(url,params);
        }

正文完
 0