【九月打卡】第9天 Java支付全家桶 企业级各类支付手段一站式解决方案（5-6）

课程名称：Java支付全家桶 企业级各类支付手段一站式解决方案

课程章节：5-6 订单页面请求创建支付订单
主讲老师：神思者

课程内容：

今天课程学习的主要知识点为编写前端订单页面请求创建支付订单的代码，包括前端接口地址配置、js通过ajax调用后端请求创建支付接口、相关问题解决小技巧。

课程收获：

1、接口地址配置，修改 config.js 文件，写入后端请求的地址，主要内容如下：

......
let wxUrl = {
	......
	nativeAppPayOrder: baseUrl + "/app/wx/nativeAppPayOrder"
}

2、js通过ajax调用后端请求创建支付接口，主要的核心代码如下：

$(".pay-btn").click(function() {
	let orderId = $(this).parents(".order").data("order-id");
	console.log("orderId：" + orderId);
	$.ajax({
		url: wxUrl.nativeAppPayOrder,
		method: "post",
		dataType: "json",
		contentType: "application/json",
		beforeSend: (req) => {
			req.setRequestHeader("token", localStorage.getItem("token"));
		},
		data: JSON.stringify({
			"orderId": orderId
		}),
		success: (resp) => {
			let codeUrl = resp.codeUrl;
			console.log("codeUr：" + codeUrl);
		},
		fail: (err) => {
			console.log(err.errMsg);
		}
	})
});

3、相关问题解决小技巧收获：
（1）如果从生成的模板 html 内，存储订单id？
解决办法：通过 html5 的自定义数据属性 data-xxx（务必注意 xxx 只能出现 “-” 或 小写字母，如 data-order-id，不能写成 data-orderId），提取属性的时候，去掉 “data-”，比如 data-order-id 使用 data(“order-id”) 函数 进行提取；

<div class="order" data-order-id="${one.id}">

（2）获取父控件元素的办法，可以通过 $(this).parent(“选择器”) 进行选择，需要注意的是如果不限定选择器的话， $(this).parent() 会找出当前元素的其 父辈、爷爷辈 等所有元素；

let orderId = $(this).parents(".order").data("order-id");