發送信息到數據庫，無需重新加載頁面

-1

我有一個網站，您可以在文本框中鍵入內容，並且會發送我寫入數據庫的內容。發送信息到數據庫，無需重新加載頁面

我一直堅持我的網頁不得不重新加載，這是在我的情況非常麻煩。我不熟悉Ajax，但我聽說它可以用來完成這項任務。我有2個文件，其中一個名爲demo.php，它將信息發送到服務器，此時有一個標頭，可將我重定向到我不想要的那個頁面。

我希望能夠在不重新加載頁面的情況下將數據發送給服務器。另一個頁面是index.php這是我正確的文本框併發送文本到我的數據庫這兩個文件都列在下面。

這是demo.php

<?php 
 
header("Location: http://mywebsite.com"); 
 
$servername = "localhost"; 
 
$username = "root"; 
 
$password = "root"; 
 
$dbname = "myDB"; 
 

 
// Create connection 
 
$conn = new mysqli($servername, $username, $password, $dbname); 
 
// Check connection 
 
if ($conn->connect_error) { 
 
    die("Connection failed: " . $conn->connect_error); 
 
} 
 

 
$value = $_POST['firstname']; 
 

 
$sql = "INSERT INTO MyGuests (firstname) VALUES ('$value')"; 
 

 

 
if ($conn->query($sql) === TRUE) { 
 
    echo "working"; 
 
} else { 
 
    echo "Error: " . $sql . "<br>" . $conn->error; 
 
} 
 

 
$conn->close(); 
 
?>

這是對的index.php是我輸入的信息，並將其發送了座談會。我需要它保持在該頁面上，而不是以任何方式重新加載。

<form action="demo.php" method="post" /> 
 
<p> <input id="textbox" type="text" name="firstname" placeholder="Enter What You Want Your Message To Be" /></p> 
 
<input id="textbox1" type="submit" value="Submit" /> 
 
</form>

我在index.php的第二次嘗試

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="navigation.css href="navigation/navigation.css"> 
 
    <link rel="stylesheet" href="navigation/navigation.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 
 

 

 
</head> 
 
<body> 
 
<form action="ajax_target.php" method="post" id="ajax-form"> 
 
<input type="text" name="firstname" /> 
 
<input type="button" name ="send" onclick="return f(this.form ,this.form.fname ,this.form.lname) " > 
 
</form> 
 
</body> 
 

 
<script> 
 
function submitForm(form){ 
 
    var url = form.attr("action"); 
 
    var formData = $(form).serializeArray(); 
 
    $.post(url, formData).done(function (data) { 
 
     alert(data); 
 
    }); 
 
} 
 
$("#ajax-form").submit(function() { 
 
submitForm($(this)); 
 
}); 
 
</script> 
 
</html>

來源

2016-01-23 Jack

[基本PHP和AJAX]的可能的複製（ http://stackoverflow.com/questions/5298401/basic-php-and-ajax） – VeeeneX

你可以有你的目的兩個文件/頁面：

1. Form page 
2. Ajax processing page where you request values will be inserted into your database.

添加到您的head標籤

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>

步驟使用AJAX：

1. Include jquery library in form page 
2. Include html form 
3. Save values from ajax, that means process that ajax

HTML表單假設是這樣的：

<form action="ajax_target.php" method="post" id="ajax-form"> 
<input type="text" name="firstname" /> 
<input type="submit" name="send" value="send" > 
</form>

Ajax調用：

function submitForm(form){ 
    var url = form.attr("action"); 
    var formData = $(form).serializeArray(); 
    $.post(url, formData).done(function (data) { 
     alert(data); 
    }); 
} 
$("#ajax-form").submit(function() { 
submitForm($(this)); 
return false; 
});

ajax_target.php處理formData，其驗證和插入數據庫。

來源

2016-01-23 11:23:51 ameenulla0007

在我的情況下，我將如何添加PHP請求和插入，因爲我沒有想法是把這個功能。 – Jack

以同樣的方式，你如何保存爲demo.php，這裏你的情況下ajax_target.php是你的demo.php – ameenulla0007

什麼區域我將放置函數 – Jack

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="navigation.css href="navigation/navigation.css"> 
    <link rel="stylesheet" href="navigation/navigation.css"> 
</head> 
<body> 
<form action="ajax_target.php" method="post" id="ajax-form"> 
<input type="text" name="firstname" /> 
<input type="submit" name ="send" value="send" > 
</form> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     var options = { 
      beforeSend: function() { 
        if (!confirm('Are you sure to submit ?')) { 
           return false; 
          } 
        }, 
      success: function (response) { 
          alert(response); 
        }, 
      error: function (response) { 
          alert(response); 
        }; 
       } 
        $('#ajax-form').ajaxForm(options); 
    }); 
     </script> 
</body> 
</html>

更新您的index.php

來源

2016-01-23 11:52:52

現在所有scrips在我的頭上，但是當我在輸入一些東西，然後按它仍然不是我的數據庫來了按鈕 – Jack

請使用的document.ready和嘗試 - $（文件）。就緒（函數（）{$（ '#form_id'）。ajaxForm（）;}）; –

使用所有這些代碼與@ ameenulla0007代碼 – Jack

你的HTML /指數形式由

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 
</head> 
<body> 
<form action="demo.php" method="post" id="ajax-form"> 
<input type="text" name="firstname" /> 
<input type="submit" name="send" value="send" > 
</form> 
</body> 

<script> 
function submitForm(form){ 
    var url = form.attr("action"); 
    var formData = $(form).serializeArray(); 
    $.post(url, formData).done(function (data) { 
     alert(data); 
    }); 
} 
$("#ajax-form").submit(function() { 
submitForm($(this)); 
return false; 
}); 
</script> 
</html>

您demo.php包括

<?php 
//your db insertion goes here. 
echo "inserted successfully"; 
?>

來源

2016-01-23 12:18:21 ameenulla0007

gotcha !!! @jack – ameenulla0007

我很抱歉地說這個消息即將出現，但它仍然沒有顯示在我的數據庫中。 – Jack

所有的啓動代碼工作正常，沒有AJAX，但它現在不是在所有 – Jack

發送信息到數據庫，無需重新加載頁面

回答

相關問題