Javascript/PHP 交互仅在第二次点击时出现

Question

已经寻找答案但没有快乐，所以这里......

我正在开发一款移动混合应用。我希望用户填写他们的 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);
?>

我不知道出了什么问题，过去几天我一直在搞各种事情试图修复它，但没有任何乐趣，所以我非常感谢你能提供的任何帮助。

Answer 1

@Robbie 有一个很好的观点，您似乎没有停止表单提交的默认行为。为此，您需要更改几件事：

1. onSubmit="login540()" 需要更改为 onSubmit="return login540()" 否则您从 login540() 函数返回的任何内容都将被忽略。
2. 在login540()函数结束时，您需要return false;来阻止表单正常提交。您也可以传入 event 对象作为第一个参数，并使用 event.preventDefault() 代替：function login540(event){event.preventDefault();...}。

不过，为了帮自己一个忙，您可以使用 jQuery 将 submit 事件处理程序绑定到表单，而不是使用内联 JS（tisk、tisk、:)）

$('#login540form').on('submit', login540);

这样，您可以将所有 JS 保存在一个地方，而不是分散在整个 HTML 中。

Answer 2

缺少函数 login540() 的底部，但这需要终止默认的“提交”操作：这可以通过“返回 false;”来完成在最后。由于我看不到结尾，不确定是否会发生这种情况，但表单可能会在 AJAX 运行时“提交”。

这很复杂，因为表单没有动作，这可能解释了不同的浏览器行为。我建议将 action 设置为“#”，然后，如果您在 URL 中看到添加了“#”，则该表单已提交并且未被您的函数停止。