怎么利用ajax把数据显示到页面啊~有没有人救救孩子啊~
<link rel="stylesheet" type="text/css" href="./myStyle/record.css" />
<script src="http://shssjk.com/Public/wmenu/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="a1">
<div class="b1">
<button id = "revert" class="c1" type="button">返回</button>
</div>
<!-- <div class="b2">
<button class = "c2" type="button">全部账单</button>
<button class = "c3" type="button">统计</button>
</div> -->
<br>
<hr />
<div class="b3">
<span class="c4">
<form name="reg_testdate">
<select id = "Year" name="YYYY">
<option value="">请选择 年</option>
</select>
<select id = "Month" name="MM" οnmοusedοwn="4" οnblur="1" οnchange="1">
<option value="" >选择 月</option>
</select>
</form>
</span>
<span class="c5">支出2666.63元，收入3333.29元</span>
</div>
<hr />
<div id = "b4" class="b4">
<ul>
<li class="d1">{$id}</li>
<li class="d2">{$remake}</li>
<li class="d3" value="">{$create_time}</li>
<li class="d4">({$sign}+{$score})元</li>
</ul>
<br>
<br>
<hr />
</div>
<div id = "b4" class="b4">
<ul>
<li class="d1">1111</li>
<li class="d2">美团平台商户</li>
<li class="d3">10月25日 12:30</li>
<li class="d4">464.44元</li>
</ul>
<br>
<br>
<hr />
</div>
<!-- <input type="hidden" id="user_id" value="600001"> -->
<input type="hidden" id="user_id" value="{$user_id}">
</div>
<script language="JavaScript">
function YYYYMMDDstart() {
//先给年下拉框赋内容
var y = new Date().getFullYear();
for (var i = (y - 6); i < (y + 1); i++) //以今年为准，前30年到今天
document.reg_testdate.YYYY.options.add(new Option(" " + i + " 年", i));
//赋月份的下拉框
for (var i = 1; i < 13; i++)
document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));
document.reg_testdate.YYYY.value = y;
document.reg_testdate.MM.value = new Date().getMonth() + 1;
}
if (document.attachEvent)
window.attachEvent("onload", YYYYMMDDstart);
else
window.addEventListener('load', YYYYMMDDstart, false);
function optionsClear(e) {
e.options.length = 1;
}
// function(){
// }
// $("YYYY").click(function(){
// $.post("/try/ajax/demo_test_post.php",
// {
// name:"YYYY,
// url:"http://127.0.0.1:8848/WDS/%E6%8F%90%E7%8E%B0%E9%A1%B5%E9%9D%A2+css/record.html"
// },
// function(data,status){
// alert("数据: \n" + YYYY );
// });
// });
window.onload = function(){
$.ajax({
type: 'post',
contentType: "application/x-www-form-urlencoded",
url: 'http://www.shssjk.com//index.php/Api/user/withdrawalRecord',
dataType: 'json', // 请求方式为jsonp
// var checkValue=$("#Year").val()
data: { user_id: 600001, year: $("#Year").val(), month: $("#Month").val() },
// data: { user_id: 600001, year: "2021"},
success: function(data) {
console.log(data)
if ($.trim(data) == '') {
// alert("已全部加载");
} else {
// alert(data);
// alert("123");
// alert(JSON.stringify(data););
$('#goods_list').append(data)
is_can_next = 1
// $('.get_more').hide();
// alert("正在加载。。。");
}
// is_can_next = 1;
$('.get_more').hide()
},
error: function(req, err) {
console.log(req)
console.log(err)
},
})
}
$('button').eq(0).click(funtion()){
$.getJSON(http://www.shssjk.com//index.php/Api/user/withdrawalRecord')
console.log(data);
}
// <div id = "b4" class="b4">
// <ul>
// <li class="d1">{$id}</li>
// <li class="d2">{$remake}</li>
// <li class="d3" value="">{$create_time}</li>
// <li class="d4">({$sign}+{$score})元</li>
// </ul>
// </div>
</script>
</body>
题主要的代码如下
<link rel="stylesheet" type="text/css" href="./myStyle/record.css" />
<script src="http://shssjk.com/Public/wmenu/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="a1">
<div class="b1">
<button id="revert" class="c1" type="button">返回</button>
</div>
<!-- <div class="b2">
<button class = "c2" type="button">全部账单</button>
<button class = "c3" type="button">统计</button>
</div> -->
<br>
<hr />
<div class="b3">
<span class="c4">
<form name="reg_testdate">
<select id="Year" name="YYYY">
<option value="">请选择 年</option>
</select>
<select id="Month" name="MM" οnmοusedοwn="4" οnblur="1" οnchange="1">
<option value="">选择 月</option>
</select>
</form>
</span>
<span class="c5">支出<b id="bOut"></b>元，收入<b id="bIn"></b>元</span>
</div>
<hr />
<div id="dvRst">
</div>
<!-- <input type="hidden" id="user_id" value="600001"> -->
<input type="hidden" id="user_id" value="{$user_id}">
</div>
<script language="JavaScript">
function YYYYMMDDstart() {
//先给年下拉框赋内容
var y = new Date().getFullYear();
for (var i = (y - 6); i < (y + 1); i++) //以今年为准，前30年到今天
document.reg_testdate.YYYY.options.add(new Option(" " + i + " 年", i));
//赋月份的下拉框
for (var i = 1; i < 13; i++)
document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));
document.reg_testdate.YYYY.value = y;
document.reg_testdate.MM.value = new Date().getMonth() + 1;
}
if (document.attachEvent)
window.attachEvent("onload", YYYYMMDDstart);
else
window.addEventListener('load', YYYYMMDDstart, false);
function optionsClear(e) {
e.options.length = 1;
}
// function(){
// }
// $("YYYY").click(function(){
// $.post("/try/ajax/demo_test_post.php",
// {
// name:"YYYY,
// url:"http://127.0.0.1:8848/WDS/%E6%8F%90%E7%8E%B0%E9%A1%B5%E9%9D%A2+css/record.html"
// },
// function(data,status){
// alert("数据: \n" + YYYY );
// });
// });
function getData() {
$.ajax({
type: 'post',
contentType: "application/x-www-form-urlencoded",
url: 'http://www.shssjk.com//index.php/Api/user/withdrawalRecord',
dataType: 'json', // 请求方式为jsonp
// var checkValue=$("#Year").val()
data: { user_id: 600001, year: $("#Year").val(), month: $("#Month").val() },
// data: { user_id: 600001, year: "2021"},
success: function (data) {
var s = '',bOut=0,bIn=0;
for (var item of data.result) {
s += `<div id="b4" class="b4">
<ul>
<li class="d1">${item.id}</li>
<li class="d2">${item.remake}</li>
<li class="d3" value="">${item.create_time}</li>
<li class="d4">(${item.sign}${item.score})元</li>
</ul>
<br>
<br>
<hr />
</div>`;
if (item.sign == '-') bOut += parseFloat(item.score);
if (item.sign == '+') bIn += parseFloat(item.score);
}
$('#dvRst').html(s);
$('#bOut').html(bOut.toFixed(2));
$('#bIn').html(bIn.toFixed(2));
/*console.log(data)
if ($.trim(data) == '') {
// alert("已全部加载");
} else {
// alert(data);
// alert("123");
// alert(JSON.stringify(data););
$('#goods_list').append(data)
is_can_next = 1
// $('.get_more').hide();
// alert("正在加载。。。");
}
// is_can_next = 1;*/
$('.get_more').hide()
},
error: function (req, err) {
console.log(req)
console.log(err)
},
})
}
window.onload =getData
$('button').eq(0).click(function () {
getData()
});
// <div id = "b4" class="b4">
// <ul>
// <li class="d1">{$id}</li>
// <li class="d2">{$remake}</li>
// <li class="d3" value="">{$create_time}</li>
// <li class="d4">({$sign}+{$score})元</li>
// </ul>
// </div>
</script>
</body>
有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~