Question

我一直在审查很多AJAX / PHP文档，并为社区提供了一个快速问题，以帮助我理解基础知识。这是一个简单的表单，用户提交一个值。它被发送到一个php计算器，它对值进行平方并创建一个结果的一点回声。

我想学习如何简单地将php文件包含到div＆＃34; target＆＃34;点击提交后。而不是传回一个值，我想在div中包含php文件。

论坛让我走到了这一步。感谢那些可以查看并提供指导的人。

的 square.html：

＆＃13;

        <!DOCTYPE html>
        <html lang="en">
        
         <head>
        <title> AJAX Insert test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        </head>
        
        <body> 
        	<form id="calculator" method="post">
          	What Number would you like to square? 
         		<input type="text" name="input_value">
         		<input type="submit" value="Go">
            </form>
        
         <div id="target"></div>
                 
        
    <script>                
    $(function() { 
    $('#calculator').live('submit', function(e) {
            e.preventDefault(); // stops form from submitting naturally
            $.ajax({
                data: $(this).serialize(),
                type: 'POST', //'GET' is default, set to 'POST' if you want.
                url: 'square.php',
                success: function(response) {
                    $("#target").load("square.php");
                }
            });
        });            
    </script>

＆＃13;

的 square.php：

<html>
<p>Results:<br><br></p>
</html>

<?php
$input = htmlspecialchars($_POST['input_value']);
$sum = $input * $input;

echo "You wrote " . $input ." <br>";
echo  $input . " squared = " .$sum . "<br><br>";

?>

Answer 1

您可能希望显示square.php的回显，这意味着您必须执行以下操作：$("#target").load(response);

使用AJAX将表单提交变量传递给php页面并将输出html返回给DIV

1 个答案: