Question

以下代码有什么问题？ before文字应更改为result的内容。但是，我可以使用result收到提醒消息。

     <script>
        $(document).ready(function(){
            $('#target').submit(function(){
              $.ajax({
                type: 'GET',
                url: "hello.txt",
                async:true,
                success: function(result){
                  alert(result);
                  $('#after').text(result);
                }
              });
            });
        });
    </script>
        <title>strange</title>
    </head>

    <body>
    <form id="target" method= "get">
     bus number: <input type="text" name="bus"><br>      
    <input type="submit" value="Submit">
    </form>   
    <div id="after">before</div>


    </body>

Answer 1

那是因为您没有阻止submit事件的默认操作。在submit事件中，将显示警报模式，然后刷新页面。现在，元素具有初始文本内容。

$('#target').submit(function(e) {
   e.preventDefault();
   $.ajax({...});
});

Answer 2

您的表单默认操作是在提交时重定向。要防止有多种方法，

一个如下，

脚本：

$(document).ready(function () {
    $('#submit').on("click", function () {
        $.ajax({
            type: 'GET',
            url: "hello.txt",
            async: true,
            success: function (result) {
                //alert(result);
                //console.log(result);
                $('#after').text(result);
            }
        });
    });
});

并改变你的：

<input type="submit" value="Submit">

要：

<input type="button" id="submit" value="Submit"> <!-- add the id="submit" -->

Answer 3

表单中提交按钮的默认操作是打包数据并将其发送到服务器，因此您必须阻止提交按钮的默认操作。

   $('#target').submit(function(e){
          e.preventDefault();
      ......
    });

Answer 4

你实际上做错了。带有提交按钮的表单实际上将使用提交的值重新加载当前页面。尝试：

<form id="target" method= "get" action="javascript:void(0)"> <!-- or the function-->
      bus number: <input type="text" name="bus"><br>      
    <input type="submit" value="Submit">
     </form>

无法更改文本jquery ajax函数？

4 个答案: