我有这个表单可以发布到show_aht2.php但我也希望它进行您在下面的代码中看到的 AJAX 调用。那么，我怎样才能同时执行这两项操作，以便用户不会转到另一个？我希望用户停留在地图上.php
提前致谢
地图.php
<form action="show_aht2.php" method="post">
<input type="radio" name="date_selected" value="1d" checked="checked"/>1d
<input type="radio" name="date_selected" value="1w" />1w
<input type="radio" name="date_selected" value="1m" />1m
<input type="radio" name="date_selected" value="3m" />3m
<input type="submit" id="aht_btn" name="get_aht" value="Get AHT" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#aht_btn').click(function(){
$.ajax({
type:"GET",
url : "show_aht2.php",
data:{ } , // do I need to pass data if im GET ting?
dataType: 'json',
success : function(data){
//doing stuff
//get the MIN value from the array
var min = data.reduce(function(prev, curr) {
return isNaN(+curr['aht_value']) || prev < +curr['aht_value'] ? prev : +curr['aht_value'];
}, 1000000);
// alert("min:" + min); //return min for debug
//get the MAX value from the array
var max = data.reduce(function(prev, curr) {
return isNaN(+curr['aht_value']) || prev > +curr['aht_value'] ? prev : +curr['aht_value'];
}, -1000000);
//alert("max:" + max); //return max number for debug
//function for calculation of background color depending on aht_value
function conv(x){
return Math.floor((x - min) / (max - min) * 255);
}
//function for background color
//if NA then show white background, either show from green to red
function colorMe(v){
return v == 'NA' ? "#FFF" : "rgb(" + conv(v) + "," + (255-conv(v)) + ",0)";
}
//going through all DIVs only once with this loop
for(var i = 0; i < data.length; i++) { // loop over results
var divForResult = $('#desk_' + data[i]['station']); // look for div for this object
if(divForResult.length) { // if a div was found
divForResult.html(data[i]['aht_value']).css("background-color", colorMe(data[i]['aht_value']));
// alert("station " + data[i]['station'] + " <br>aht value" + data[i]['aht_value'] + "<br>timestamp:"+data[i]['ts_generated']);
}//end if
}//end for
}//end success
});//end ajax
});//end click
});//end rdy
</script>
show_aht2.php
if (isset($_POST['get_aht'])) {
if($_POST['date_selected'] == "1d" )//yesterdays result and using past 10 minute
{
$start_date = $one_day;
//$interval_value = "10 MINUTE";
//echo $start_date;
}
elseif($_POST['date_selected'] == "1w" )//1 week results
{
$start_date = $one_week;
//$interval_value = "7 DAY";
//echo $start_date;
}
elseif($_POST['date_selected'] == "1m" )//1 month results
{
$start_date = $one_month;
//$interval_value = "30 DAY";
//echo $start_date;
}
elseif($_POST['date_selected'] == "3m" )//3 month results
{
$start_date = $three_month;
//$interval_value = "90 DAY";
//echo $start_date;
}
}
/* what I expect from ther call back*/
$result = array();
foreach ($memo as $username => $memodata) {
if (in_array($username, array_keys($user))) {
// Match username against the keys of $user (the usernames)
$userdata = $user[$username];
//if AHT is null give N/A as value
if (is_null($memodata['aht_value'])) {
$result[] = array( 'username' => $userdata['username'],
'aht_value' => 'NA',
'station' => $userdata['station']//,
// "ts_generated" => $userdata['ts_generated']
);
}//end inner if
//else give the actual value of AHT without the decimals
else {
$result[] = array( 'username' => $userdata['username'],
'aht_value' => substr($memodata['aht_value'],0,-3),
'station' => $userdata['station']//,
// "ts_generated" => $userdata['ts_generated']
);
}//end else
}//end outer if
}//end for
echo json_encode($result);
先做ajax调用，然后用ajax的回调提交带有.submit（）的表单。
<form action="show_aht2.php" method="post" id="formtopost">
<script type="text/javascript">
$(document).ready(function() {
$('#aht_btn').click(function() {
$.ajax({
type: "GET",
url: "show_aht2.php",
data: {}, // do I need to pass data if im GET ting?
dataType: 'json',
success: function(data) {
//doing stuff
//end success
},
always: function() {
//submit form !!!
$("#formtopost").submit();
}
}); //end ajax
}); //end click
}); //end rdy
</script>
尝试：
<script type="text/javascript">
$(document).ready(function() {
$('#aht_btn').click(function(event){
event.preventDefault();
$.ajax({
type:"GET",
url : "show_aht2.php",
data:{ } , // do I need to pass data if im GET ting?
dataType: 'json',
success : function(data){
//doing stuff
}//end success
});//end ajax
});//end click
});//end rdy
</script>
使用方法预防默认：http://api.jquery.com/event.preventdefault/
您可以使用 ajax 提交表单，而不是尝试同时执行这两个表单
也许是这样的事情？
<script type="text/javascript">
$(document).ready(function() {
$('#aht_btn').click(function(){
// This prevents the form from submitting
event.preventDefault();
// Capture form input
var $form = $(this);
var serializedData = $form.serialize();
// Run the ajax post
$.ajax({
url : "show_aht2.php",
type:"POST",
data: serializedData
success: function(response) {
// Do something
}
});
});//end click
});//end rdy
</script>