Question

html代码：

<html>
<head>
<title>jQuery Ajax POST</title>
<script type="text/javascript"
src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {

$('#form1').submit(function(event) {
event.preventDefault(); //disable from default action
    $.post("ex2_5.php", $(this).serialize(), function(msg) {
        alert(msg);
        $("#info1").html(data.msg);
    }, "json");
});
});
</script>
</head>
<body>
<div id="info1">
Put the textbox input value into this block.
</div>
<br />
<form id="form1">
<input type="text" name="field1" id="field1" />
<input type="submit" name="submit"
id="submit" value="Submit Form" />
</form>
</body>
</html>

php代码：

//Establish values that will be returned via ajax
$result = array();

//Begin form validation functionality
if ( !empty($form1))
    $result[0] = "<h1>$field1</h1>";
else
    $result[0] = "<h1>Field is empty!!</h1>";

//return json encoded string
echo json_encode($result);;

当我输入文字时，它无法在输入框上方显示相同的文字。也许有一些错误的代码，但我找不到它，请帮助＆gt;＆lt;

Answer 1

重新构建您的代码。结帐，

<html>
    <head>
        <title>jQuery Ajax POST</title>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script>
    $(function(){
        $("form[id='form1']").on('submit', function(ev){
            ev.preventDefault();
            var th = $(this);
            var data = th.serialize();
            var action = th.attr('action');

            $.post(action, data).done(function(response){
                $("#info1").html(response.msg);
            });
        });
    });
    </script>
    </head>

    <body>
        <div id="info1">
        <!--Put the textbox input value into this block.-->
        </div>
        <br />
        <form action="ex2_5.php" id="form1">
            <input type="text" name="field1" id="field1" />
            <input type="submit" name="submit" id="submit" value="Submit Form" />
        </form>
    </body>
</html>

的 ex2_5.php

<?php $result = array(); if (!empty($_POST['form1'])) $result['msg'] = "<h1>".$_POST['form1']."</h1> is added"; else $result['msg'] = "<h1>Field is empty!!</h1>"; header('Content-type: application/json'); echo json_encode($result);

的错误：
1） ;;双分号
PHP文件中的 2） $_POST['form1']
3）返回时在JS中使用错误的索引

的调试：
打开控制台（右键单击 - ＆gt;检查元素 - ＆gt;控制台选项卡）并检查错误

Answer 2

解决方案1： 将ajax响应的内容类型指定为application / json。否则响应将是一个不是json的字符串。

// Specify content type header as application/json
header('Content-type: application/json');

//Establish values that will be returned via ajax
$result = array();

//Begin form validation functionality
if ( !empty($form1))
    $result[0] = "<h1>$field1</h1>";
else
    $result[0] = "<h1>Field is empty!!</h1>";

//return json encoded string
echo @json_encode($result);

解决方案2： 如果header不是application / json，则使用JSON.parse函数将字符串解析为对象。

<script>
$(document).ready(function() {

$('#form1').submit(function(event) {
event.preventDefault(); //disable from default action
    $.post("ex2_5.php", $(this).serialize(), function(data) {
        var data = JSON.parse(data);
        $("#info1").html(data.msg);
    }, "json");
});
});
</script>

在jQuery实验室中看不到预期的结果

2 个答案: