javascript - 无需提交表单即可获取输入字段的值

标签 javascript php jquery ajax forms

我想获取输入字段的当前值,然后根据字段值从数据库中回显一些信息,而不使用提交。

例如,当您为网站填写新的个人资料时,如果您的用户名已被占用,则无需经历单击“提交”并返回的麻烦,而是在该字段旁边显示一条错误消息。

这是我到目前为止所得到的:

<html>
<body>
<form name='Form'>
Date: <input type='text' id='sheetid' />
<input type='button' onclick='ajaxFunction()' value='Query!' /> <br />
</form>
<div id='content'>Result</div>
</body>

<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
    try{
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
        alert("ERROR!");
        return false;
        }
    }
}
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('content');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var sheetid = document.getElementById('sheetid').value;
    var queryString = "?url=" + sheetid;
    ajaxRequest.open("GET", "test.php" + queryString, true);
    ajaxRequest.send(null); 
}
</script>

</html>

和我的 php:

<?
$st=$_POST['sheetid'];
require_once('database_connect.php');
$inf = "SELECT * FROM `comments` WHERE date='$st' ORDER BY time ASC";
 $info = mysql_query($inf);
     if(!$info) die(mysql_error());
   $info_rows = mysql_num_rows($info);
     if($info_rows > 0) {
   echo '<table width="95%">';
while($info2 = mysql_fetch_object($info)) {
echo '<tr>';
echo '<td>';echo '<a href="mailto:'.$info2->username.'@mail.com">'.stripslashes($info2->username).'</a>'; echo "("; echo date('H:i', $info2->time)."): "; echo stripslashes($info2->comment).'</td>'.'</tr>';
}
}
?>

我不确定为什么它不显示任何注释,也无法弄清楚如何在不按查询按钮的情况下使其工作,但在用户完成输入或单击输入框后。

如有任何反馈,我们将不胜感激。

感谢

最佳答案

在哪里初始化XmlHttpRequest对象?像这样的事情:

var ajaxRequest ;
if (window.XMLHttpRequest) 
{ 
ajaxRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject) 
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

为了完成我的回答,我将添加两件事:

  • 第一个:在 onreadystatechange 函数中,不要忘记测试 HTTP 响应代码,如下所示:
    if (xhr.readyState == 4 && xhr.status == 200)

  • 第二:你可以使用像 jQuery 这样的 JS 框架或Prototype简化您的 AJAX 调用。

响应 2

尝试添加这个:

ajaxRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded;');

回应

您使用 GET 方法来发布数据 ajaxRequest.open("GET", "test.php"+ queryString, true);,但在 PHP 中,您使用 POST var 检索它$_POST['sheetid'] 只需使用这个即可:

$_GET['sheetid'];

关于javascript - 无需提交表单即可获取输入字段的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18959130/

相关文章:

jquery - jquery中的滚动元素

javascript - 升级到 React 18 后检测到额外的点击。为什么?

javascript - 滚动浏览 jquery ui 自动完成返回时如何隐藏值

php - 如何只允许一个用户在 php 中编辑表单?

php - 查询仅返回发布后 60 秒内的记录

php - 通过 ajax 请求调用时尝试插入数据时出现 500 内部服务器

javascript - Jquery $(window).height() 函数不返回实际窗口高度

javascript - Log4JavaScript 服务器端编码

javascript - 允许 HTML 中的 Javascript 函数中使用撇号

javascript - 从动态构建的表单提交时,ajaxForm 正在发送空 POST