在我的代码中，我尝试从表单控件中的3个输入中获取数据。 但是，当我单击“提交”时，不会捕获任何数据并重新加载页面。 提交正在按预期触发table.draw（），但输入中没有任何值被捕获并添加到请求中。 我试图直接在ajax块中提取值，并在提交函数中单独提取。
我做错了什么？
<?php
# $Id$
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap -->
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="js/jquery-1.11.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/datatables.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-table.min.css" rel="stylesheet" />
<link href="css/datatables.min.css" rel="stylesheet" />
<link href="css/apirpt.css" rel="stylesheet" />
<title>Status</title>
</head>
<body style="padding-top:20px">
<div class="col-md-12">
<div class="well">
<div class="container">
<h1>Status Report</h1>
<div class="col-md-9">
<form class="form-inline">
<div class="form-group">
<label for="reqid">ReqID:</label>
<input type="text" class="form-control" name="reqID" placeholder="Enter Req ID here" id="reqID">
</div>
<div class="form-group">
<label for="start">Start Date:</label>
<input type="text" class="form-control" name="dtStart" placeholder="MM/DD/YYYY" id="dtStart">
</div>
<div class="form-group">
<label for="end">End Date:</label>
<input type="text" class="form-control" name="dtEnd" placeholder="MM/DD/YYYY" id="dtEnd">
</div>
<button id="btnSubmit" type="submit" class="btn btn-success">Submit</button>
</form>
</div>
<table id="grid" class="table table-striped table- bordered display compact" width="100%" >
<thead>
<tr>
<th>Code</th>
<th>From</th>
<th>To</th>
<th>Req ID</th>
<th>Transaction Date</th>
<th>Old Code Status</th>
<th>New Code Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Code</th>
<th>From</th>
<th>To</th>
<th>Req ID</th>
<th>Transaction Date</th>
<th>Old Code Status</th>
<th>New Code Status</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#grid tfoot th').each(function() {
var title = $('#grid thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '"/>');
});
var vReqID;
var table = $('#grid').DataTable({
"sPaginationType" : "full_numbers",
"ajax": {
"url" : "data/get_status.php",
data: function(data) {
//$('form').serialize();
data.dtStart = $("#dtStart").val();
data.dtEnd = $("#dtEnd").val();
data.reqID = vReqID; //$("#reqID").val();
}
},
"processing" : false,
"serverSide" : true,
"fixedHeader" : true,
"lengthMenu" : [[10, 25, 50, 100, 200],[10,25,50,100,200]],
"pageLength" : 25,
"sScrollX" : "110%",
"sScrollY" : "600px",
"bScrollCollapse": true,
"columnDefs": [
{ "type": "signed-num", "targets": 3}
]
});
table.columns().every(function () {
var datatableColumn = this;
$(this.footer()).find('input').on('keyup change', function() {
datatableColumn.search(this.value).draw();
});
});
$('#btnSubmit').on('click', function(event){
vReqID = $("#reqID").val();
//vStart = $("#dtStart").val();
//vEnd = $("#dtEnd").val();
//alert(vReqID);
table.draw();
});
});
</script>
</body>
</html>
在ajax调用的数据元素中，它似乎只能用于静态数据。我需要能够动态地将参数发送到我的网址。
data: function(data) {
return $.extend( {}, data, {
"dtStart" : "2/1/2017", //$('#dtStart').val(),
"dtEnd" : "2/28/2017", //$('#dtEnd').val(),
"reqID" : "451" //$('#reqID').val()
});
这是请求，注意最后3个变量是空的。那些应该包含我的价值观。
GET /data/get_status.php?draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=5&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B6%5D%5Bdata%5D=6&columns%5B6%5D%5Bname%5D=&columns%5B6%5D%5Bsearchable%5D=true&columns%5B6%5D%5Borderable%5D=true&columns%5B6%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B6%5D%5Bsearch%5D%5Bregex%5D=false&search%5Bregex%5D=false&dtStart=&dtEnd=&reqID=&_=1489602817698 HTTP/1.1
Host: localhost:8088
Connection: keep-alive
Accept: application/json, text/javascript, */*; q=0.01
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Referer: http://localhost:8088/report_status.php
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
答案 0 :(得分：0)
根据doc，你试过吗
"ajax": {
url: "data/get_status.php",
data: function (d) {
// merge object d with new object
return $.extend({}, d, {
dtStart: $("#dtStart").val(),
dtEnd: $("#dtEnd").val(),
reqID: $("#reqID").val()
});
}
}
These answers使用类似的方法。
默认情况下，当您点击type="submit"按钮时，它会将表单数据发送到某处（通常发送到表单action属性中指定的地址）。阻止这种情况发生的一种方法是简单地将type="submit"更改为type="button"。这将阻止您的表单在单击按钮时提交，因为您将使用应该触发AJAX的table.draw()来处理它。