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()'. 예상대로 작동 할 것이라는 희망 아래를 확인하십시오. –

당신은 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을 사용할 수 있습니다.

출처

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를 사용하여 서버에 텍스트 상자 값을 보내는 방법은 무엇입니까?

답변

관련 문제