javascript - 如何使用ajax将文本框值发送到服务器?

标签 javascript html ajax

我有一个 HTML 表单,其中包含用户名文本框和提交按钮。

当用户在用户名文本框中输入名称时,我想获取该值并将其发送到服务器,以便我可以检查该用户名是否已被其他用户使用。

这是我创建表单的代码:

<!DOCTYPE html>
<html>
<head>

<script src="JquerySock.js"></script>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-    scale=1">    
<script> 
function Usernameerrorfunc(field, errordiv, Notallowcharserror_SPN){

}
</script>
</head>
<body>

<div id="Registeration_Div" class="Registeration_Div">

<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">

    <div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
        <input type="text" id="Registeration_Username_box" class="Registeration_Username_box"
            placeholder="" name="UserName" maxlength="30" onblur="Usernameerrorfunc(this, 'Usernameerror_spn', 'Usernamenowallow_spn');" onclick="textboxfocus(this)"/>

    </div>
    <div class="Registration_Submit_Div">
        <input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn"/>
    </div>

</form>
</div>

</body>
</html>

最佳答案

您可以使用$.ajax jQuery 中的方法:

function postUsernameToServer() {
   var username = $("#Registeration_Username_box").val();

   $.ajax({
       url: "http://YourServerUrl",
       type: "POST",
       data: { username: username },
       success: function() {
           alert('Successfully connected to the server');
       }, 
       error: function() {
           alert('Something went wrong');
       }
   });
}

要使用按钮单击(来 self 的评论)来调用它,您可以执行以下操作:

<button id="checkUsername">Check username</button>

$("#checkUsername").on("click", function() {
    postUsernameToServer();
});

确保您已导入 jQuery 库以使用该函数。 如果您不想使用 jQuery 而想使用 native JavaScript,您可以使用 XMLHttpRequest .

关于javascript - 如何使用ajax将文本框值发送到服务器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39063163/

相关文章:

javascript - 将模式与输入字段的最大长度结合起来

javascript - 为什么 Express 在 AngularJS $http.get 上的控制台日志之间花费如此长的时间?

html - 保持不同分辨率的位置

html - 使用相对定位定位 div 时,有没有办法使下一个 div "flow"到前一个 div 现在所在的位置?

javascript - 为什么 jquery removeClass to 按钮在ajax之后仍然可以正常工作?

javascript - 在页面加载时创建文本框和插入数据

javascript - 使用 jQuery remove() 添加项目。添加回相同的项目时,类更改将被保留

html - css 事件子菜单应该显示整个子菜单

php - 如何使用 JQuery AJAX 实现通用 CSRF token ?

javascript - 你什么时候使用过多的 AJAX