Question

我真的很怀疑如何开始使用这段代码。在我的DIV标签“talraekke”中，我想从我的数据库中收到最后10条记录。这意味着每当我在表单字段中输入一个数字时，div标签应该使用最新的数字进行更新，而不必更新页面。在途中有人可以帮助我吗？

最诚挚的问候朱莉

PS：请远离过时的php / sql语句:-)这只是我的测试环节。

HTML

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/my_script.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="css\placing.css">
        <title>Numbers</title>
    </head>

    <body>
        <div class="topbar">
            <p>Topbar</p>
        </div>


        <div class="talraekke">
            ****Recieve from DB******
        </div>

        <div class="content">
            <p>Enter The Number</p>
            <form id="myForm" action="userInfo.php" method="post">
                <input type="value" name="numbervalue">
                <button id="sub">Save</button>
            </form>
            <span id="result"></span>
        </div>  
    </body>
    </html>

JS：

// Insert function for number
function clearInput() {
    $("#myForm :input").each( function() {
         $(this).val('');
    });
}

    $(document).ready(function(){
         $("#sub").click( function(e) { // note the 'e'
       e.preventDefault(); // remove default action(submitting the form)
       $.post( $("#myForm").attr("action"), 
         $("#myForm :input").serializeArray(), 
         function(info){ $("#result").html(info); 
       });
       clearInput();
    });
    })

// Receive data from database

PHP：

<?php

include('connection.php');


// Insert To Database
$strSQL = "INSERT INTO numbertable(numbers) VALUES('" . $_POST["numbervalue"] . "')";


        if(mysql_query("INSERT INTO numbertable VALUES('numbers')"))
            echo "Insert Succesfull";
        else
            echo "Failed";


// The SQL statement is executed 
    mysql_query($strSQL) or die (mysql_error());

// Close the database connection
    mysql_close();

?>

Answer 1

老实说，你可能想要研究像Backbone.js这样的框架，这可以使这更容易。首先，您应该通过转义表单输入或将其包装在函数中以返回数值来删除SQL注入漏洞。此外，我不认为输入类型的＆＃34;值＆＃34;已验证;你可以使用＆＃34; text＆＃34;或＆＃34;数字＆＃34;但请记住，后面的不会阻止安全漏洞，因为无法信任客户端输入。

如果您想手动执行此操作，只需从控制器返回类似JSON对象的数据，然后您可以在客户端使用它。如果没有任何提交按钮（并且您没有调用提交方法），则不应该阻止表单提交。如果你想用一个例子来使用jQuery用jQuery post（）的结果填充DIV，可以在这里找到一个例子：

http://api.jquery.com/jquery.post/

CTRL + F：使用Ajax发布表单并将结果放入div

Answer 2

您正在寻找的是

$res = mysql_query( 'SELECT * FROM numbertable' );
$values = mysql_fetch_array( $res );
echo json_encode( $values );

就在php的//close the database connection部分之前。在die();之前添加?>可能会造成伤害，以确保没有进一步的输出。

您的javascript中的一些更改可以帮助您入门：

$("#sub").click( function(e) { 
    e.preventDefault(); // remove default action(submitting the form)
    $.post( $("#myForm").attr("action"), 
        $("#myForm :input").serializeArray(), 
        function(info){ 
            info = JSON.parse(info);
            $("#result").html(info);
            console.log(info);
        }) // end of the POST request success hander
   ); // end of the $.post function call
}); // end of the .click function call

您现在拥有返回值的Javascript对象。您可以在Developer控制台中看到它。从那里开始。

但请注意不推荐使用php的mysql扩展。更好地使用mysqli或pdo_mysql。另请注意Eric Wilk的答案。安全是一个严重的问题，框架可以使您的生活在这方面和其他方面更容易。

开发的另一个提示：在大多数浏览器开发人员工具中，您都有一个网络选项卡，您可以在其中检查正在进行的所有HTTP请求的标头和响应信息。找出正在发生的事情非常有帮助。

哦，还有一件事我忘了......

echo通知数据库插入成功或失败可能会使你的php无效json的响应。您可以暂时删除它们，或者更好，开始构建响应对象并在整个脚本中不进行其他输出。想想这样的事情：

$response = array();
/* ...some code in between... */
    $response["insert"] => array("success" => true, "msg" => "Insert Succesfull");
else
    $response["insert"] => array("success" => false, "msg" => "Failed");
/* ... */
$values = mysql_fetch_array( $res );
$response["values"] => $values;
echo json_encode( $response );

使用JQuery和Ajax从db接收数据

2 个答案:

哦，还有一件事我忘了......