Question

我是AJAX的新手，这是我的第一个项目。首先，用户通过表单在index.php中输入句子并将数据传递给executed.php以返回格式化的句子。我已完成所有逻辑工作，但我无法在原始页面（index.php）中显示数据。我使用ajax来完成这项任务但失败了。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $('form').submit(function(event) { 

            var postForm = { //Fetch form data
                'name'  : $('input[name=name]').val() 
            };

            $.ajax({ //Process the form using $.ajax()
                type        : 'POST',
                url         : 'executed.php',  
                data        : 'postForm',
                dataType    : 'json',
                success     : function(data) {

                    $('#success').html(data); 
                    }
                });
                event.preventDefault(); //Prevent the default submit
            });
        });
</script>

</head>
<body>
    <form name="postForm" method="post">
        <table>
            <tr>
                <td><textarea rows="4" name="name" id="name" cols="50" placeholder="Enter your sentence here..."></textarea></td>
            </tr>
        <tr>
            <td><input type="submit" name="s1" value="Check"></td>
        </tr>
        <tr><span class="throw_error"></span></tr>
        </table>
    </form>
    <div id="success"></div>

并且在execution.php中，在所有逻辑工作之后，我想在index.php上显示$ a和$ b，因此我将其存储在$form_data中并使用echo json_encode($form_data)使其显示在index.php但不起作用

Answer 1

您需要从ajax调用返回数据，然后对其执行某些操作。

$.ajax({ //Process the form using $.ajax()
    type        : 'POST',
    url         : 'gramcheck.php',  
    data        : postForm,
    dataType    : 'json',
    success     : function(data){
         // AJAX has succeeded, and returned output to 'data' var
         $('#target_location').html(data);  // Put the code into some target

         // -OR- //

         // Further JS processing with data var
    }
});

通过表格执行后显示数据

1 个答案: