2016-01-21 64 views
0

页我很想知道,如果有可能,我可以有一个div重装像窗口一样。原因是我有一个论坛,但我不想在完成四个完整页面后重新加载。所以我在想,如果按下提交按钮时,只是在该分区或论坛部分的元素可以做一个背景重载或只是负载由他们自己。让一个div装载的论坛无需重新加载

这是在信息获取键入一个文件名为的论坛。我希望它不会重新加载网页,但留在这个论坛,并且仍然将数据发送到数据库。

<html> 
 
    <body> 
 
    
 
     <form action="demo.php" method="post" /> 
 
      <p>Input 1: <input type="text" name="firstname" /></p> 
 
      <input type="submit" value="Submit" /> 
 
     </form> 
 

 
     <div id = "load_results"></div> 
 
    </body> 
 
</html>

这是发送信息到数据库,但我希望它被巧妙地完成。

<?php 
 
$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 "<a href=https://twitter.com/angela_bradley>My Twitter</a>"; 
 
} else { 
 
    echo "Error: " . $sql . "<br>" . $conn->error; 
 
} 
 

 
$conn->close(); 
 
?>

+1

Ajax是你需要使用的东西。 – Rasclatt

+0

修正语法和代码缩进 – wogsland

回答

0

是的,有一种方法。它被称为AJAX--但不用担心,它非常简单。

您的代码将是这个样子:

HTML:

<form action="demo.php" method="post" /> 
    <p>Input 1: <input type="text" name="firstname" /></p> 
    <input type="submit" value="Submit" /> 
</form> 

JS/jQuery的:

$(function(){ 
    $('form').submit(function(evt){ 
    //next line stops form submission from sending you to `demo.php` 
    evt.preventDefault(); //evt stands for "event" - can be anything. I use e.preventDefault() 
    var fn = $('[name=firstname]').val(); 
    $.ajax({ 
     type: 'post', 
     url: 'demo.php', //send data ONLY to demo.php -- page stays as it is 
     data: 'first='+fn, 
     success: function(d){ 
      if (d.length) alert(d); 
     } 
    }); //END ajax 
}); //END document.ready 

demo.php

<?php 
    $fn = $_POST['fn']; 
    //Do your database insert here 

    //If you wish, you can return some data to the AJAX's success function: 
    echo 'You submitted: ' .$fn; 

这里有一些帖子用简单的AJAX的例子:

AJAX request callback using jQuery

+1

谢谢@gibberish是我会把js/jQuery – Jack

+1

我在哪里放置js/jQuery – Jack

+1

我试图使用此代码,但它不能回答我的问题 – Jack