做一个余额查询的 ajax 请教

2016-10-05 19:34:32 +08:00
 raighne

已经封装好了一个 API:/api/getschoolcardmonery/:id

比如访问 localhost:3000/api/getschoolcardmonery/10000 会返回一个 json :

{ "schoolCard_Id": 10000, "leftMenory": 8979 }

前端定义了一个<input>和<button>

怎么写 ajax ,点击 button 查询 input 输入的 id 的 leftMenory 的值。

2786 次点击
所在节点    JavaScript
19 条回复
zhaohui318
2016-10-05 20:06:00 +08:00
http://www.w3schools.com/jquery/ajax_getjson.asp

使用 jQuery getJSON() 方法,里面有例子
shiji
2016-10-05 20:31:38 +08:00
$('#input 的 HTML 元素 id').click(function (){
随便起个名字();
});
function 刚才起的那个名字(){
$.ajax({
type: "GET",
url: "/api/getschoolcardmonery/10000",
success: function (data) {
alert(data['leftMenory']);
}, error: function () {
alert("出了点什么错误");
}
});

}
大概是这样,不知道排版会不会乱
shiji
2016-10-05 20:33:31 +08:00
@shiji 擦 写错了,第一个是查询按钮的 id
raighne
2016-10-05 20:43:15 +08:00
@shiji 这个 url 是需要变化的 需要根据我 input 里输入的查询 id 返回不同的值的

比如我要查询的 id 是 1000 ,就请求 /api/getschoolcardmonery/10000
如果想查询 11111 ,就请求 /api/getschoolcardmonery/11111
shiji
2016-10-05 20:47:49 +08:00
@raighne
那就文本拼接啊
function 刚才起的那个名字(){
var cardID = $('#学生卡号 input 的 html 元素 ID').val().trim();
$.ajax({
type: "GET",
url: "/api/getschoolcardmonery/"+ cardID,
success: function (data) {
alert(data['leftMenory']);
}, error: function () {
alert("出了点什么错误");
}
});

}
stillwaiting
2016-10-05 20:49:58 +08:00
@shiji 好有耐心 -_-,本来想吐槽 lz 的
raighne
2016-10-05 20:51:53 +08:00
@stillwaiting
@shiji 多谢多谢,新学 JavaScript ,多谢指导
majinjing3
2016-10-05 20:53:55 +08:00
@shiji 好评?
majinjing3
2016-10-05 20:54:09 +08:00
@shiji 好评!
raighne
2016-10-05 20:57:17 +08:00
@shiji alert 出来是 undefined
raighne
2016-10-05 20:58:38 +08:00
@shiji 换成 data.leftMonery
shiji
2016-10-05 21:11:03 +08:00
@raighne 这个有可能是你的 Ajax 没有返回正确的 header , 你检查一下 ajax 的请求 header 里面有没有这一句:
Content-Type: application/json
shiji
2016-10-05 21:35:52 +08:00
aaronlam
2016-10-05 22:20:17 +08:00
@shiji 这耐心,就是想赞一个!
precisi0nux
2016-10-06 06:52:18 +08:00
leftMoney ?你是想说 balance 吗?
shuson
2016-10-06 09:41:08 +08:00
leftmoney ,这命名让人陶醉。
balance 除了平衡,生活中更常用作“余额”
xbdsky
2016-10-06 10:56:54 +08:00
@shuson 没用中文命名就不错了
raighne
2016-10-06 11:15:15 +08:00
@precisi0nux
@shuson
@xbdsky 感谢提醒
raighne
2016-10-06 11:22:02 +08:00
@shiji 多谢耐心指导,确实是 Ajax 没有返回正确的 header

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/310713

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX