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

Question

I have two questions我有两个问题

First 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>

Now when the user open the page has to click on the button to display "List of Companies" in a Table >>> I try to display the ajax without buttons directly when the user open the page displaying the "List of Companies" in a Table directly by this code现在，当用户打开页面时必须单击按钮以在表格中显示“公司列表”>>> 当用户打开显示“公司列表”的页面时，我尝试直接显示没有按钮的 ajax表直接按此代码

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

but does not work I want solution if it possible但不起作用我想要解决方案，如果可能的话

Second Question:第二个问题：

I have a form has input fields with submit button like This Login page :我有一个表单有输入字段和提交按钮，比如这个登录页面：

<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>

Now when the user fill the fields has to click on Login button to submit the data.现在，当用户填写字段时，必须单击登录按钮提交数据。 The problem is when the user fill username filed and password filed and after that pressing on Enter in the Keyboard that does not submit the data >>>> I want when the user press on Enter on the Keyboard directly submit the data that means the user does not has to click on Login button that is better for usability.问题是当用户填写用户名和密码时，然后在不提交数据的键盘中按 Enter 键 >>>> 我想当用户在键盘上按 Enter 时直接提交意味着用户的数据不必单击登录按钮，这对可用性更好。

Answer 1

For your first question, I think what you are looking for is:对于您的第一个问题，我认为您要寻找的是：

<body onload="myFunction()">

This will execute your function, once your element has been loaded.一旦您的元素被加载，这将执行您的功能。

The enter key is usually bound to a object, but in your instance you don't have one - and even if you did, you don't want a POST or GET to happen. enter 键通常绑定到一个对象，但在您的实例中您没有 - 即使您有，您也不希望 POST 或 GET 发生。 To get around this, simply bind a method to your function that will execute your Ajax call.要解决这个问题，只需将一个方法绑定到将执行 Ajax 调用的函数。

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

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

问题描述

1 个解决方案

解决方案1
1 2014-04-15 21:33:53

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

问题描述

1 个解决方案

解决方案1 1 2014-04-15 21:33:53

解决方案1
1 2014-04-15 21:33:53