Как отправить значение текстового поля на сервер с помощью ajax?

У меня есть HTML-форма, которая содержит текстовое поле пользователя и кнопку отправки.Как отправить значение текстового поля на сервер с помощью ajax?

Когда пользователь вводит имя в текстовое поле имени пользователя, я хочу принять это значение и отправить его на сервер, чтобы я мог проверить, было ли имя пользователя уже принято другим пользователем или нет.

Вот мой код для создания формы:

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

источник

2016-08-21 jacky

использование 'jQuery.ajax()'. Пожалуйста, проверьте ниже ответ, надеясь, что он будет работать, как ожидалось. –

Вы можете использовать метод $.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'); 
     } 
    }); 
}

Чтобы вызвать это с помощью кнопки мыши (Из моего комментария) вы могли сделайте следующее:

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

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

Убедитесь, что у вас есть библиотека jQuery, импортированная для использования th е функции. Если вы не хотите использовать jQuery и довольно родной JavaScript, вы можете использовать XMLHttpRequest.

источник

2016-08-21 10:28:58

спасибо за ваш ответ, но можете ли вы сказать мне, где использовать эту функцию, в текстовом поле inblur = или где-то еще – jacky

@jacky - вы можете вызвать его, используя 'postUsernameToServer()'. Я бы рекомендовал нажать кнопку. Использование события onblur не похоже на правильный подход. Я привел пример о том, как это сделать в моем ответе. –

Я могу сказать, что вы правы, но я не хочу, чтобы пользователь нажимал кнопку каждый раз, когда вводил имя, я бы предпочел, чтобы он был автоматическим – jacky

Попробуйте это будет работать:

Использование 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 
?>

источник

2016-08-21 12:19:42

Как отправить значение текстового поля на сервер с помощью ajax?

ответ

Смежные вопросы