ajax 请求接口实例
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
最简单的情况下,$.ajax()可以不带任何参数直接使用。
注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置。
回调函数
如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
jquery API地址:https://jquery.cuishifeng.cn/jQuery.Ajax.html
<!-- 表单部分 -->
<form action="#" onsubmit="return false" method="post" id="form">
<input type="text" value="" placeholder="公司名称" id="lyname" name="name" required="required" style="float: left;" maxlength="20" class="mar_m" />
<input type="text" value="" placeholder="您的手机" id="lytel" name="tel" required="required" style="float: right;" maxlength="11" id="phone" onblur="checkPhone()" />
<div style="clear:both"></div>
<input type="text" name="remark" id="lyremark" value="" placeholder="留言内容" class="content" />
<div id="" class='send'>
<button type="submit" onclick="login()">提交</button></div>
</form>
<!-- js部分 -->
// ajax表单提交
function login() {
// alert("remark:"+ $('#lyremark').val()+"name:"+ $('#lyname').val()+"tel:"+ $('#lytel').val())
$.post("您的接口地址", {
//获取用户输入的值,也是要传到后台的字段
remark: $('#lyremark').val(),
name: $('#lyname').val(),
tel: $('#lytel').val(),
//以下为不需要获取的字段,留空即可
tel_spare: "",
source: "官网",
group: "",
record_user_name: "",
owner_name: "",
type: null,
record_user: null,
owner: null,
department: null
},
//请求成功之后执行的函数
function(result) {
console.log(result);
// 请求成功后把值清空
$('#lyremark').val('');
$('#lyname').val('');
$('#lytel').val('');
//提示信息
alert('您已提交成功!');
});
}
本文来自博客园,作者:奔跑的前端猿,转载请注明原文链接:https://www.cnblogs.com/sxdpanda/p/13131194.html
如需了解更多文章,请移步:https://www.yuque.com/sxd_panda