标签：jQuery function 调用 console name ajax log response 请求

一、$.ajax()的基础使用

<button id="btn">发送请求</button>
<script src="/js/jquery.min.js"></script>
<script>
var params = {name: 'wangwu', age: 300}
$('#btn').on('click', function () {
	$.ajax({
		// 请求方式
		type: 'post',
		// 请求地址
		url: '/user',
		//在发送请求前调用
		beforeSend: function () {
					alert('发送请求前调用')
					//如果用户操作不合规范或密码不正确等情况，则请求不会被发送
					//return false;
		},
		// 向服务器端发送的请求参数
		// name=zhangsan&age=100
		//1 json对线格式传参
		// data: {
		// 	name: 'zhangsan',
		// 	age: 100
		// },
		//2 指定json格式类型要用json字符串格式传参
		data: JSON.stringify(params),
		//2 指定参数的格式类型
		contentType: 'application/json',
		
		// 请求成功以后函数被调用
		success: function (response) {
			// response为服务器端返回的数据
			// 方法内部会自动将json字符串转换为json对象
			console.log(response);
		}
	})
});

二、serialize()方法

<form id="form">
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="submit" value="提交">
</form>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$('#form').on('submit', function () {
	// 将表单内容拼接成字符串类型的参数
	// var params = $('#form').serialize();
	// console.log(params)
	serializeObject($(this));
	//禁止页面自动提交刷新
	return false;
});

// 封装serialize方法，将表单中用户输入的内容转换为对象类型
function serializeObject (obj) {
	// 处理结果对象
	var result = {};
	// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
	var params = obj.serializeArray();

	// 循环数组 将数组转换为对象类型
	$.each(params, function (index, value) {
		result[value.name] = value.value;
	})
	// 将处理的结果返回到函数外部
	return result;
}

三、$.ajax发送JSON请求

<button id="btn">发送请求</button>
<script src="/jquery.min.js"></script>
<script>
	// 点2 需要事先定义
	function fn (response) {
		console.log(response)
	}
	$('#btn').on('click', function () {
		$.ajax({
			//要有jsonp这个接口名
			url: 'http://localhost:3000/jsonp',
			// 点1 jsonp默认有参数名，但可以进行自定义名称，即向服务器端传递函数名字的参数名称
			//jsonp: 'cb',
			
			// 点2 回调函数声明为自己先前定义的函数（一般不用，用sucess就好）
			//jsonpCallback: 'fn',
			
			// 表示现在要发送的是jsonp请求
			dataType: 'jsonp',
			
			// 点2 原写法
			success: function (response) {
				console.log(response)
			}
		})
	});

四、$.get、$.post的使用

$('#btn').on('click', function () {
		$.get('/base', 'name=zhangsan&age=30', function (response) {
			console.log(response)
		})
});

$('#btn').on('click', function () {
		$.post('/base', function (response) {
			console.log(response)
		})
});

标签：jQuery,function,调用,console,name,ajax,log,response,请求
来源： https://www.cnblogs.com/xfbk/p/16608330.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。