![](/img/trans.png)
[英]how to send form values to php using AJAX without reloading page?
[英]how to send form element values directly to php page using javascript
我在這里嘗試的是當你點擊提交按鈕我調用一個javascript函數,它接受所有表單元素值並將其傳遞給php頁面而不將它們存儲在變量中,然后發送這些變量。
我的表格示例:
<form enctype="multipart/form-data" method="post" name="fileinfo">
<label>Your email address:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" />
<br />
<label>Custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32" />
<br />
<label>File to stash:</label>
<input type="text" name="email" required />
<input type="button" onsubmit="sendvalues()" value="Stash the file!" />
</form>
現在在javascript上,我想發送用戶ID和電子郵件字段直接轉到php頁面,而不先將它們檢索到變量中,然后通過ajax發送該變量。
function sendValues() {
var formElement = document.querySelector("form");
console.log(formElement);
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "<?php echo VIEW_HOST_PATH;?>process_data.php");
formData.append("process_type", 'process_data');
request.send(formData); //want to send all form userid, email directly to php page
request.onreadystatechange = (e) => {
console.log(request.responseText)
}
}
這可以直接將user_id和電子郵件值發送到php頁面嗎? 因此,例如,包含電子郵件和用戶信息以及任何其他表單元素的表單元素,它們都通過ajax發送到php頁面,但最重要的是不將此元素值存儲在javascript變量中。 謝謝
在您的表單中,您應指定屬性“action”。 該操作將是您的php文件,將處理您的提交操作。 您還可以添加到此表單ID選擇器。
<form id="file-info" enctype="multipart/form-data" action="/process_data.php" method="post" name="fileinfo">
現在在你的函數sendValues()中你可以提交這樣的表單:
function sendValues() {
document.getElementById("file-info").submit();
}
或者如果您將輸入按鈕類型設置為提交,則甚至不需要此功能:
<input type="submit" name="submit" />
然后在你的php文件中你可以使用你的變量:
if (isset( $_POST['submit']))
{
$userId = $_POST['userid'];
$email = $_POST['email'];
}
然后嘗試這個
HTML代碼
<form enctype="multipart/form-data" method="post" class='submit_form' name="fileinfo">
<label>Your user name:</label>
<input type="text" name="name" id='name' placeholder="name" required /><br />
<label>Your email address:</label>
<input type="email" autocomplete="on" autofocus name="userid" id='userid' placeholder="email" required size="32" maxlength="64" /><br />
<label>Custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>File to stash:</label>
<input type="text" name="email" required />
<input type="button" value="Stash the file!" class='submit' />
JQUERY CODE在同一頁面上(包括jquery)
$('body').on('click', '.submit', function(e) {
e.preventDefault();
$.ajax({
'url': 'mpay.php',
'type': 'POST',
'data': $('.submit_form').serialize(),
success: function(response) {
console.log(response);
}
});
});
PHP CODE文件名是mpay.php
$arr = [
'name' => $_POST['name'],
'email' => $_POST['email'],
];
echo "<pre>;
print_r($arr);
echo "</pre>";
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.