發送HTML表單發佈數據到Jquery文件？

我想用jQuery發送發佈數據到我的發佈數據文件處理程序postinfo.php，但到目前爲止我可以做到這一點。發送HTML表單發佈數據到Jquery文件？

這裏是我的post.php中代碼：

<HTML> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 
<script type="text/javscript"> 
$('#form_id').on('submit', function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: "http://www.vemvo.com/test/postinfo.php", 
     data: $(this).serialize(), 
     success: function() { 
     alert('success'); 
     } 
    }); 
}); 
</script> 
<form method="post" id="form_id"> 
<input type="text" name="ime"> 
<input type="submit" id="submit" name="submit" value="Send"> 
</form>

您可以在這裏看到的頁面：http://www.vemvo.com/test/post.php

這裏是我的postinfo.php代碼：

<?PHP 

$ime = $_POST['ime']; 

echo "Your name is $ime"; 
?>

這裏位於postinfo.php - http://www.vemvo.com/test/postinfo.php

那麼，我的錯誤和我如何才能使它工作？現在它不發送數據，也不給我成功警報。

來源

2013-10-20 Tonny Struck

http://www.johnboy.com/scripts/simple-jquery-form-without-page-refresh/contact.php – Seazoux

裹$（ '＃form_id'）上（」（）{...}） – mplungjan

您必須闡明text/javascript正確
您需要分配負載事件處理
不應該有任何需要返回false張貼在這裏其他一些人
從不要求任何形式的提交
Wra p你的身體標記
使用正確的DOCTYPE
對於html文檔，你可以看看uploadify或How can I upload files asynchronously?

爲點1

固定碼6

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Ajax</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $('#form_id').on('submit', function(e){ 
     e.preventDefault(); 
     $.ajax({ 
     type: "POST", 
     url: "./postinfo.php", 
     data: $(this).serialize(), 
     success: function() { 
     alert('success'); 
     } 
    }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <form method="post" id="form_id"> 
    <input type="text" name="ime"> 
    <input type="submit" value="Send"> 
    </form> 
</body> 
</html>

來源

2013-10-20 11:55:49 mplungjan

我試過了你的代碼，但它沒有給出成功警報。我認爲這不是發送數據太多.. –

請不要叫任何名稱=提交！ – mplungjan

你是什麼意思？我改變了我的代碼，看起來和你給我的完全一樣，但它沒有提供成功警報。在這裏你可以看到它 - http://vemvo.com/test/post.php –

您的jQuery選擇器不會找到該表單，因爲選擇器在DOM中存在form標記之前正在運行。嘗試它包裹在jQuery的功能等待文件準備就緒：

$(function() { 
    $('#form_id').on('submit', function(e){ 
     // the rest of your code 
    }); 
});

它也可能是一個好主意，return false末，進一步打壓表單的默認發佈操作：

e.preventDefault(); 
$.ajax({ 
    type: "POST", 
    url: "./postinfo.php", 
    data: $(this).serialize(), 
    success: function() { 
    alert('success'); 
    } 
}); 
return false;

當前表單是正常發佈的。由於AJAX處理程序從不附加（因爲選擇器執行時元素不存在），它只是執行一個普通的文檔級表單文章。由於form標記中沒有指定action屬性，因此該頁面默認發佈到自身。這只是迴應當前頁面。

編輯：你也有一個錯字可以阻止瀏覽器在所有執行JavaScript代碼：

<script type="text/javscript">

你錯過了第二個「一」。這應該是：

<script type="text/javascript">

來源

2013-10-20 11:57:40 David

所以我必須改變，以便將數據發佈到./postinfo.php？我的整個代碼的外觀如何？ –

無需返回false！ – mplungjan

@TonnyStruck：正如我的建議，你需要將你的jQuery代碼包裝在'$（function（）{...}）;'中。目前你的代碼在* form元素存在之前執行*。（注意你的JavaScript塊是如何在form元素之上的，它馬上內聯執行，所以它在form元素已知之前執行。）將它包裝在jQuery函數中會導致它不會執行，直到整個文檔爲止準備。 – David

發送HTML表單發佈數據到Jquery文件？

回答

相關問題