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

Question

I have an HTML form which contains a username textbox and a submit button. 我有一个HTML表单，其中包含一个用户名文本框和一个提交按钮。

When a user inputs a name in the username textbox, I want to take that value and send it over to the server so I can check whether the username has already been taken by another user or not. 当用户在用户名文本框中输入名称时，我想使用该值并将其发送到服务器，以便可以检查用户名是否已被另一个用户使用。

Here is my code for creating the form: 这是我创建表单的代码：

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

Answer 1

You could use the $.ajax method in jQuery: 您可以在jQuery中使用$.ajax方法：

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');
       }
   });
}

To invoke this using a button click (From my comment) you could do the following: 要使用按钮来调用它（单击我的评论），您可以执行以下操作：

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

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

Ensure that you have the jQuery library imported to use the function. 确保已导入要使用该功能的jQuery库。 If you did not want to use the jQuery and rather native JavaScript you can use the XMLHttpRequest . 如果您不想使用jQuery和本机JavaScript，则可以使用XMLHttpRequest 。

Answer 2

Try this it will work : 试试这个将起作用：

Use jQuery.ajax() 使用jQuery.ajax（）

Code : 代码：

function submitFormData() {
var name = document.getElementById("Registeration_Username_box").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'username=' + name;
if (username == '') {
alert("Please Enter the Username");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "checkUsername.php",
data: dataString,
cache: false,
success: function(data) {
alert(data);
},
error: function(err) {
alert(err);
}
});
}
return false;
}

I am giving example in php for checking the username. 我在php用于检查用户名的示例。 You can use any language accordingly. 您可以相应地使用任何语言。

checkUsername.php : checkUsername.php：

<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("dbname", $connection); // Selecting Database
//Fetching Values from URL
$username=$_POST['username'];
//Select query
$query = 'select * from user_table WHERE name = "'.$username.'";
$query_result = mysql_query($query);
$res = mysql_fetch_assoc($query_result);

do
{
  echo json_encode($res);
}while($res = mysql_fetch_assoc($query_result));
}
mysql_close($connection); // Connection Closed
?>

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

问题描述

2 个解决方案

解决方案1
2 2016-08-21 10:28:58

解决方案2
0 2016-08-21 12:19:42

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

问题描述

2 个解决方案

解决方案1 2 2016-08-21 10:28:58

解决方案2 0 2016-08-21 12:19:42

解决方案1
2 2016-08-21 10:28:58

解决方案2
0 2016-08-21 12:19:42