Question

我有一个HTML格式如下。我试图使它成为这个POST的响应（一个字符串）成为id =“answer”的文本。

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">    </script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script src="form.js"></script>
</head>
<body>
    <form id="myForm"
          action="http://myserver.com/post-destination/"
          method="post">
        <p><label>Input: <br><textarea name="formInput"></textarea></label></p>
        <p><input type="submit" value="Submit" /></p>
    </form>
    <p id="answer">?</p>
</body>

我试图在名为form.js的文件中使用jQuery Form插件，该文件包含：

$(document).ready(function() {
    $('#myForm')
        .ajaxForm({
            target: "#answer"
    });
});

我在这里做错了什么？我确信它只是一些非常愚蠢的东西，而且我知道有很多关于HTML表单和jQuery的问题，但是跟随它们却证明是不成功的。我无法解决这个问题，因为这是我第一次尝试与网络相关的任何内容。谢谢你的帮助！

Answer 1

你可以试试这个：

<head>
    <script>
        function text() {
            var answer = document.getElementById("input").value;
            document.getElementById("answer").innerHTML = answer;
        }
    </script>
</head>
<body>
    <form id="myForm" action="http://myserver.com/post-destination/" method="post">
        <p><label>Input: <br><textarea id="input" name="formInput"></textarea></label></p>
        <p><input onClick="text()" type="submit" value="Submit" /></p>
    </form>
    <p id="answer">?</p>
</body>

Answer 2

你jQuery ajax调用似乎是不正确的。您可以按如下方式重构它：

$(document).ready(function() {
    $('#myForm').submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {
            // set the target data 
            console.log ('set the target data');
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            //if fails   
            console.log ('server responded something else ...');
        }
    });
});
});

如何使HTML表单的响应更新页面上的文本？

2 个答案: