使用ajax提交表单后如何在div中显示元素？ （不刷新页面）

Question

如何使用ajax在提交表单后显示div中的元素？ （不刷新页面）

............................................... .................................................. .................................................. ..................

正常我用这种方式

首先选择单选按钮，然后按提交按钮，它将显示数据（带刷新页面）

我想在div中使用ajax和display元素提交表单而不是刷新页面

我该怎么做？

HTML

<form name="f1" method="POST" action="">
<input type="radio" name="color" value="red">red
<br>
<input type="radio" name="color" value="black">black
<br>
<input type="submit" name="submit" value="OK">
</form>

PHP

<?PHP
if ( $_GET["color"] != "" )
    {
        $sql = "SELECT * FROM products WHERE color = '$_GET[color]' order by id asc";
        $result = mysql_query($sql);
        $datas=mysql_fetch_array($result);{
        $product_name = stripslashes(str_replace('\r\n', '<br>',($datas['product_name'])));
        }
        echo $product_name;
    }
?>

Answer 1

试试这个

HTML

<form name="f1" method="POST" action="">
<input type="radio" name="color" value="red">red
<br>
<input type="radio" name="color" value="black">black
<br>
<input type="submit" name="submit" value="OK">
</form>

<!-- This element will show ajax request -->
<div id="result"></div>

的Javascript

$(document).ready(function(){
  $("form[name=f1]").submit(function(){
    $.ajax({
       url : 'yourphpscript.php',
       type : 'GET',
       data : $(this).serialize(),
       success : function(data){
          $("#result").html(data);
       }
    });
    //!This is important to stay the page without reload
    return false;
  });
});