我在 StackOverflow 上发现了 5-6 个类似的问题，但我看不到与我的代码的相关性——他们的方法似乎不同——所以我无法从中找出解决方案.
基本上，当我调出我的 report.html 页面并输入有效日期(如 2015-06-01 和 2015-06-12)时，选择交易“A”并点击提交 ... 简短的结果表出现在底部的目标 div 中……然后迅速消失。
另外一件奇怪的事情是，当我点击浏览器上的后退按钮时，会出现我的结果(并且它保持不变)!
另一件事:如果我将 action="ajaxFunction()"添加到 ，结果会显示并保留(尽管我还在屏幕中间看到一个漂亮的大 jQuery Mobile 错误消息框几秒钟) .
无论如何，我想我已经很接近了。下面的代码。谢谢!
report.html
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title> Report</title>
<link rel="stylesheet" href="css/style_report.css" type="text/css">
<link rel="stylesheet" href="../../../jquery-mobile/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<form name="sqlForm" method="" action="" id="sqlForm" >
<div class="date-range">
<p>Choose a date range</p>
<div><input type="text" id="startDate" name="startDate" data-role="date" data-date-format="yy-mm-dd"></div>
<p>to</p>
<div><input type="text" id="endDate" name="endDate" data-role="date" data-date-format="yy-mm-dd"></div>
</div>
<div class="deal_type">
<p>Choose one or more deals</p>
<select name="dealCode" id="dealCode">
<option value="*">Select a deal</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
</select>
</div>
<input data-rel="close" type="submit" id="submit" value="Submit" onclick="ajaxFunction()" value="Query MySQL" >
</form>
<!-- BUTTON HERE TO GO TO RESULTS AND CLOSE PANEL -->
</div><!-- PANEL ENDS -->
<div class="wrapper">
<h1>REPORTS</h1>
<div data-role="main" class="ui-content">
<!-- PANEL BUTTON -->
<a href="#myPanel" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-bars">
Filter results</a>
<div id="sqlTable" style="background-color:yellow; height:auto;">Person info will be listed here...</div>
</div>
</div>
</div>
<script src="../../../jquery-mobile/demos/js/jquery.js"></script>
<script src="../../../jquery-mobile/demos/js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<!-- JQuery datepicker -->
<!--Datepicker relevant external files-->
<script src="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script src="https://rawgithub.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<!-- SCRIPT TO SET UP THE DATEPICKER CORRECTLY -->
<script>
$(document).ready(function () {
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(document).on("click", "#date1", function () {
var viewportwidth = $(window).width();
var datepickerwidth = $("#ui-datepicker-div").width();
var leftpos = (viewportwidth - datepickerwidth) / 2;
$("#ui-datepicker-div").css({
left: leftpos,
position: 'absolute'
});
});
$("#date1").datepicker({
onSelect: function () {
alert("HAHA");
}
});
}
);
</script>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('sqlTable');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;
var dealCode = document.getElementById('dealCode').value;
var queryString = "?startDate=" + startDate + "&endDate=" + endDate + "&dealCode=" + dealCode;
ajaxRequest.open("GET", "getReport.php" + queryString, true);
ajaxRequest.send(null);
}
console.log("ffff", "startDate="+str1+"&endDate="+str2+"&dealCode="+str3);
</script>
</body>
</html>
getReport.php
<?php
// MAKE THE MAIN CONNECTION, AND GIVE IT A NAME, 'CON'
$con = mysqli_connect("URL", "USERNAME", "PASSWORD", "DB");
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
// THE INFO AFTER THE COMMA, "MAIN_REPORT", APPEARS TO BE USELESS, BUT HAS TO BE THERE.
mysqli_select_db($con,"MAIN_REPORT");
//GRAB THE STUFF FROM THE HTML FORMS
$startDate = $_REQUEST['startDate'];
$endDate = $_REQUEST['endDate'];
$dealCode = $_REQUEST['dealCode'];
// MAKE YOUR OVERALL QUERY HERE.
$sql="SELECT * FROM `oasis_bagels` WHERE `dealDate` > '$startDate' AND `dealDate` < '$endDate' ORDER BY `dealDate`";
$result = mysqli_query($con,$sql);
// THIS TESTS YOUR QUERY, OFTEN GIVING YOU A HELPFUL ERROR MESSAGE
if (!$result) {
printf("Error: %s\n", mysqli_error($con));
exit();
}
?>
<?php /*?> $all = mysqli_query(
$con,
//"SEL
SELECT * FROM `oasis_bagels` WHERE `dealCode` = ' "$q" ';
// SELECT * FROM `oasis_bagels` WHERE `dealDate` > '$startDate' AND `dealDate` < '$endDate'
// SELECT * FROM `oasis_bagels` WHERE `dealDate` > '2015-01-01' AND `dealDate` < '2100-01-01'
// WHERE dealCode=*"
);
<?php */?>
<!-- ////////////////////////////////////////////////////////// -->
<!-- THE CODE BELOW GIVES ME THE DATE AND TIME RESULTS I WANT.
NONE OF THIS SHOULD CHANGE, AS IT'S ONLY FORMATTING THE RESULTS. -->
<!-- ////////////////////////////////////////////////////////// -->
<table border="1" cellpadding="4" cellspacing="4" bordercolor="#CFCBCB">
<tr class="header">
<th>Purchased</th>
<th>Code</th>
<th>Name</th>
<th>Value</th>
</tr>
<?php while ($row = mysqli_fetch_array($result)): ?>
<?php $date = $row['dealDate']; ?>
<?php $code = $row['dealCode']; ?>
<?php $name = $row['dealName']; ?>
<?php $value = $row['dealValue']; ?>
<tr>
<td>
<span class="date">
<?php
$PhpDate = strtotime($date);
$FormattedPhpDate = date('m/d/y', $PhpDate );
echo $FormattedPhpDate;
?></span><br>
<span class="time"><?php
$PhpDate = strtotime($date);
$FormattedPhpDate = date('(g:i A)', $PhpDate );
echo $FormattedPhpDate;
?></span>
</td>
<td class="code"><?php echo $code; ?></td>
<td><?php echo $name; ?></td>
<td><?php echo $value; ?></td>
</tr>
<?php endwhile; ?>
</table>
<?php mysqli_close($con); ?>
最佳答案
将您的提交按钮更改为...
<button type="button" data-rel="close" id="submit" value="Query MySQL" >
<input style="display: none;" type="submit" id="realsubmit">
并添加这个...
$("#submit").on('click', function() {
// do some stuff
$("#realsubmit").trigger('click');
return false;
});
关于php - HTML 表单 GET 结果显示在目标 div 中，然后立即消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30808050/