Question

我有两个问题

第一个问题：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="" />
<title>List Companies</title>

<script language="JavaScript" type="text/javascript">

 function ajax_post(){
var databox =document.getElementById("status");
    var hr = new XMLHttpRequest();
    var url = "yourdomain/List_ajax.php";
var f = document.getElementById("format").value;
    var vars = "format="+f;
    hr.open("POST", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = JSON.parse(hr.responseText);
        var x="<table border='1'><tr><td style='width:80px'><center><b>Company ID</center></b></td><td style='width:80px'><center><b>Company Name</center></b></td><td style='width:80px'><center><b>Manager Name</center></b></td><td style='width:80px'><center><b>Manager Phone</center></b></td></tr>";
        for(var o in return_data){
            if(return_data[o].company_id){
                x +="<tr><td style='width:80px'>"+return_data[o].company_id+"</td><td style='width:80px'>"+return_data[o].company_name+"</td><td style='width:80px'>"+return_data[o].manager_name+"</td><td style='width:80px'>"+return_data[o].manager_phone+"</td></tr>";
            }//end if            
        }//end for
        x += "</table>";
        databox.innerHTML=x;
    }//end if
}//end function
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = '<center> <img src="http://www.slimspresents.com/wp-content/themes/simplicity/images/indicator.gif" alt="wait"> </center>';
}
</script>
</head>

<body>


<table width="380px">

<tr>
<td colspan="2" style="text-align:center">
<h3>List of Companies</h3> 
</td>
</tr>

<tr>
<td colspan="2" style="text-align:center">
<input id="format" name="format" type="hidden" value="json"/>
<input name="myBtn" type="submit" value="List Companies" onClick="javascript:ajax_post();">
</td> 
</tr>

</table>

<br /><br />
<div id="status"></div>

</body>
</html>

现在，当用户打开页面时，必须单击按钮才能显示＆＃34;公司列表＆＃34;在表格＆gt;＆gt;＆gt;当用户打开显示＆＃34;公司列表＆＃34;的页面时，我尝试直接显示没有按钮的ajax。直接通过此代码在表中

 <script type="text/javascript">
 ajax_post();
 </script>

但不起作用我想要解决方案

第二个问题：

我有一个表单，其输入字段包含提交按钮，如“登录页面”：

<table width="350px">

<tr>
<td colspan="2" style="text-align:center">
<h3>Login </h3> 
    <input id="format" name="format" type="hidden" value="json"/>
</td>
</tr>

<tr>
<td valign="top">
   <label for="username">Username *</label>
</td>
<td valign="top">
   <input id="username" name="username" type="text" maxlength="50" size="25"/>
</td>
</tr>

<tr>
<td valign="top">
  <label for="password">Password *</label>
</td>
<td valign="top">
  <input id="password" name="password" type="password" maxlength="50" size="25" />
</td>
</tr>

<tr>
<td colspan="2" style="text-align:center">
  <input name="myBtn" type="submit" value="Login" onClick="javascript:ajax_post();">
</td> 
</tr>

</table>

现在，当用户填写字段时，必须单击“登录”按钮才能提交数据。问题是当用户填写用户名归档和密码归档后，按下键盘上的Enter键不提交数据＆gt;＆gt;＆gt;＆gt;我希望当用户按下键盘上的Enter键时直接提交数据，这意味着用户无需单击“登录”按钮，这对于可用性更有利。

Answer 1

关于你的第一个问题，我认为你在寻找的是：

<body onload="myFunction()">

一旦你的元素被加载，这将执行你的功能。

回车键通常绑定到一个对象，但在您的实例中，您没有一个 - 即使您这样做，也不希望发生POST或GET。要解决这个问题，只需将方法绑定到将执行Ajax调用的函数。

<input id="password" name="password" type="password" maxlength="50" size="25" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()"/>

在没有提交按钮的情况下在html页面中显示ajax响应

1 个答案: