如何在jQuery中使用php Ajax结果值

时间:2017-09-24 09:40:13

标签: javascript php jquery ajax

我刚创建了一个简单的程序来通过PHP Ajax获取输入的数据。 但我希望结果来自result.php页面作为变量。

<form method="post">
<input type="text">
<button id="btn-1">
</form>
<div id="ajax-result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#btn-1").click(function(){
            var txt = $("input").val();
            $.post("result.php", {suggest: txt}, function(result){ 
            $("#ajax-result").html(result);
            });
        });
    });
    </script>

1 个答案:

答案 0 :(得分:0)

我建议使用$ .ajax而不是$ .post,以便您可以更好地控制AJAX调用,这样您就可以定义是否希望'result'变量为JavaScript 字符串对象

<form method="post">
    <input type="text">
    <button id="btn-1">
</form>
<div id="ajax-result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){

        // Define global variable to contain a copy of the AJAX return result
        var globalResult;

        function formatResultIntoHtml(result) {
            // add logic to convert your result object into html string, and return
        }

        $("#btn-1").click(function(){
            var txt = $("input").val();

            $.ajax({
                url: "result.php",
                data:{
                    suggest: txt
                },
                type: "POST", // Set HTML action type
                dataType: "json", // Set expected data return type
                success:function(result) { 
                    globalResult = result; // Make result variable global
                    $("#ajax-result").html(formatResultIntoHtml(result)); // Format 
                }
            });
        });
    });
</script>

然后在您的result.php文件中,回显一个JSON字符串,以便JQuery可以将其自动转换为Javascript对象。

<?php

    // Add your logic to process $_GET['suggest'] here

    $dataArray = array(
        'var1' => 'data1',
        'var2' => 'data2',
        'var3' => 'data3'
    );

    header('Content-Type: application/json'); // Tells our client that we are sending JSON data
    echo json_encode($dataArray);
?>