如何使用ajax將文本框值發送到服務器？

Question

我有一個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>

Answer 1

您可以在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');
       }
   });
}

要使用按鈕來調用它（單擊我的評論），您可以執行以下操作：

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

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

確保已導入要使用該功能的jQuery庫。 如果您不想使用jQuery和本機JavaScript，則可以使用XMLHttpRequest 。

Answer 2

試試這個將起作用：

使用jQuery.ajax（）

代碼：

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

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