[英]How to get and pass data from html to php using ajax
嗨,我很想知道如何將字符串從表單傳遞到 php,該 php 將測試其中是否有內容,然后使用此表單發布警報消息以嘗試從中獲取數據,然后顯示它是否已通過正確。
HTML代碼:
<form action='' method=''>
Name:<input type='text' name='name' id='name'>
Age:<input type='text' name='age' id='age'>
message:<textarea name='message' id='message'></textarea>
<input type='submit' value='Send'>
</form>
輸出:
<?php
if(isset($_POST['name']) && isset($_POST['age']) && isset($_POST['message'])){
$a = $_POST['name'];
$b = $_POST['age'];
$c = $_POST['message'];
if($a != NULL && $b != NULL && $c != NULL)
{
echo "
<script type='text/javascript'>
window.alert('Success'+ a + b + c)
</script>
";
}
};?>
雖然仍然在之前的同一頁面中,但顯示了我在警報框中輸入的內容。
如果它附帶有關如何將其與 get 和 post 功能一起使用的說明以及鏈接(如果可以的話),我也將不勝感激?
為了一種簡單的方法,您可以對代碼進行以下更改:
HTML:
<form action='' method='' id="myform">
Name:<input type='text' name='name' id='name'>
Age:<input type='text' name='age' id='age'>
message:<textarea name='message' id='message'></textarea>
<input type='submit' value='Send'>
</form>
PHP:
(your_page_with_php_script)
<?php
if(isset($_POST['name']) && isset($_POST['age']) && isset($_POST['message'])){
$a = $_POST['name'];
$b = $_POST['age'];
$c = $_POST['message'];
if($a != NULL && $b != NULL && $c != NULL)
{
echo "Success ".a." ".b." ".c;
}
};
?>
腳本:(首先包含jquery)
$('#myform').submit(function(){
var name = $('#name').val();
var age = $('#age').val();
var message = $('#message').val();
$.ajax({
type: "POST",
url: "your_page_with_php_script.php",
data: "name="+name+"&age="+age+"&message="+message,
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
根據需要編輯以下內容:
$.ajax({
type: 'POST',
url: 'your_php_page.php',
data: { postVar1: 'theValue1', postVar2: 'theValue2' },
beforeSend:function(){
// this is where we append a loading image
$('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');
},
success:function(data){
// successful request; do something with the data
$('#ajax-panel').empty();
$(data).find('item').each(function(i){
$('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
});
},
error:function(){
// failed request; give feedback to user
$('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
}
});
請求頁面應該有一個 id="ajax-panel" 的 div
您必須將 Jquery 與 Ajax 結合使用...
<script>
$("#submit").click(function()
{
var name = $('#name').value();
var age= $('#age').value();
var message= $('#message').value();
$.ajax({
url: "urpage.php",
data: {name : name, age : age, message : message},
type: "POST",
success: function(output) {
alert(output); //This will show ur output in an alert box
} }
})
});
</script>
希望這有效
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.