已经搜索了答案但没有快乐,所以在这里...
我正在开发一个移动混合应用程序。我希望用户填写他们的 ID 号,然后将其提交给 javascript 函数进行基本验证,然后向我的服务器端 PHP 发出 jQuery.getJSON 请求,该请求返回数据,然后我的 jQuery 将使用数据重新填充表单div。
目前它在 Firefox 中根本不起作用,只有在我第二次按下提交按钮后才能在 Safari 中正常工作。它返回正确的数据,因此链接正常。
我的问题是:为什么第一次点击后div 没有重新填充?
.HTML:
<div id="login540div">
<form id="login540form" onSubmit="login540()">
Enter Student ID number<input type="text" name="login540id" id="login540id"/>
<input type="submit" value="Submit" />
</form>
</div>
Javascript:
function login540(){
// validates the data entered is an integer.
var loginNo = document.getElementById("login540id").value;
//if(!isNaN(loginNo))
if((parseFloat(loginNo) == parseInt(loginNo)) && !isNaN(loginNo))
{
//jSonCaller(loginNo);
$.getJSON('http://localhost:8888/c05673160/login540.php?q='+loginNo, function(data){
//alert(data);
$('#login540div').html("<p>First Name ="+
data.firstName+
"</p> Last Name ="+data.lastName+" </p>Module No.1 ="+
data.moduleNo1+"</p> Module No.2 ="+
data.moduleNo2+"<p> Course ID="+
data.courseID+"</p>");
})
}
else
{
// alert(loginNo); CHECKED
alert("Please make sure to insert only a whole number");
}
然后PHP是这样的...
<?php
include ("config.php");
/*
require_once('FirePHPCore/FirePHP.class.php');
ob_start();
$firephp = FirePHP::getInstance(true);
$var = array('i'=>10, 'j'=>20);
$firephp->log($var, 'Iterators');
*/
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'root';
$dbname = 'collegeData';
$q=$_GET["q"];
$table = "studentTable";
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$conn)
die('Could not connect: ' . mysql_error());
if (!mysql_select_db($dbname))
die("Can't select database");
$result = mysql_query("SELECT * FROM {$table} WHERE studentID = '".$q."'");
if (!$result)
die("Query to show fields from table failed!" . mysql_error());
$json = array();
while($row = mysql_fetch_array ($result))
{
$json = array(
'firstName' => $row['firstName'],
'lastName' => $row['lastName'],
'moduleNo1' => $row['moduleNo1'],
'moduleNo2' => $row['moduleNo2'],
'courseID' => $row['courseID']
);
}
$jsonstring = json_encode($json);
echo $jsonstring;
mysql_close($conn);
?>
我不知道出了什么问题,过去几天我一直在搞各种事情试图修复它,但没有快乐,所以我真的很感激你能提供的任何帮助。
@Robbie有一个很好的观点,即您似乎没有停止表单提交的默认行为。为此,您需要更改几件事:
-
onSubmit="login540()"
需要更改为onSubmit="return login540()"
否则从login540()
函数返回的任何内容都将被忽略。 - 在
login540()
功能结束时,您需要return false;
以阻止表单正常提交。您还可以传入event
对象作为第一个参数,并改用event.preventDefault()
:function login540(event){event.preventDefault();...}
。
但是,为了帮自己一个忙,您可以使用jQuery将submit
事件处理程序绑定到表单,而不是使用内联JS(tisk,tisk,:)
$('#login540form').on('submit', login540);
通过这种方式,您可以将所有JS保存在一个地方,而不是分散在整个HTML中。
函数 login540() 的底部丢失了,但这需要杀死默认的"提交"操作:这可以通过末尾的"return false;"来完成。由于我看不到结尾,不确定这是否会发生,但是表单可能在 AJAX 运行时"提交"。
由于表单没有操作,这可能解释了不同的浏览器行为,因此情况更加复杂。我建议将操作设置为"#",然后,如果您看到 URL 中添加了"#",则表单已提交并且未被您的函数停止。