ajax访问后端接口方式,简单又省心

      今天来聊聊ajax的简单访问方式,当然你必须要导入JQuery.js的包,

第一种 : $.post

这里的ps可以是一个表单的序列,也就是表格里面所有包含name的参数,都会在访问时传入后台。

var ps = $("#submit_form").serialize(); 该操作即是将表单内容序列化为字符串。

当然如果你不想使用ps,想使用另外一种方式也是可以的:将 ps 替换为 { "name" : "value1 ,  "name2" : value2} 。

 如同这种格式传参也是OK的,当然,具体哪种看实际需求。

$.post("/URL", ps, function(data) {
    if (data){
        alert("You datas : " + data);
    }
    else {
        alert("失败");
    }
});

方法等价于:

$.ajax({
            type : 'POST',
            url : "/URL",
            success : function(data) {
                if (data){
                    alert("You datas : " + data);
                }
                else {
                    alert("失败");
                }
            }
});

第二种 $.getJSON 

方法特点: 相信大家看到名字就知道是干嘛的了,没错就是访问后台然后拿到JSON字符串的代码,

对比于仅仅指定ajax的$.ajax设置很多多余的代码是不是简单很多了呢?

$.getJSON("/URL",args,function(result, status) {
	console.log(result)
});

方法等价于:

$.ajax({
            type : 'POST',
            url : "/URL",
            dataType : 'json',
            success : function(result) {
                console.log(result)//打印返回值
            }
});

第三种 :$.getScript()

通过 HTTP GET 请求载入并执行 JavaScript 文件。

语法: url :将要请求的 URL 字符串。(路径)

success : 可选。规定请求成功后执行的回调函数。

额外的参数:

  • response - 包含来自请求的结果数据
  • status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
jQuery.getScript(url,success(response,status))

 举列代码:

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

等价于:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

第四种:ajaxSubmit()

提供了一种使用AJAX立即提交HTML表单的机制。这种方法挺棒的。

需要导入辅助JS,有道云笔记分享链接:

文档:辅助JS.note
链接:http://note.youdao.com/noteshare?id=aa0eb4f3a45875388ea67b5bdda4d52f&sub=F2BCA092A985434D80A1E5B440D2F0AA

依赖方式: 

$("#loginForm").ajaxSubmit(function(data) {
		if (data) {
			window.location.href = "/index.html";
		} else { 
			alert("登录失败!");
		}
})

ajax一些其他的信息:

以下数据来源于 : jQuery 参考手册 - Ajax

jQuery Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数 描述
jQuery.ajax() 执行异步 HTTP (Ajax) 请求。
.ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend() 在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
.ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。
.load() 从服务器加载数据,然后把返回到 HTML 放入匹配元素。
jQuery.param() 创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post() 使用 HTTP POST 请求从服务器加载数据。
.serialize() 将表单内容序列化为字符串。
.serializeArray() 序列化表单元素,返回 JSON 数据结构数据。

表单提交辅助JS:copy到 js里然后 格式化(Ctrl + Shift + F)一次就OK了。

PS: 如果你不知道怎么创建JS文件,可以查阅我之前的博客。

链接:https://blog.csdn.net/qq_43227967/article/details/82832799 

 

你可能感兴趣的:(前端,ajax提交方法,ajax简便方法,ajax访问后端接口,如何使用ajax)