Question

我有一个简单的表单和一个<div>容器。我的问题是，当我提交表单时，我正在尝试刷新div。

<div id="refresh">
   FOO FOO FOOOOOOOOOOOOOOOOO
</DIV>

 <form  id="test">
    <input type="text" name"testFI">
    <input type="submit" id="postB"  value="Post" />
 </form>

任何帮助将不胜感激！

Answer 1

您可以使用jQuery的post()，一种AJAX速记方法，使用HTTP POST请求从服务器加载数据。

以下是使用ajax发布表单并将结果放入div 的示例：

<form action="/" id="searchForm">
    <input type="text" name="s" placeholder="Search...">
    <input type="submit" value="Search">
</form>

<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>

<script>
    // Attach a submit handler to the form
    $( "#searchForm" ).submit(function( event ) {

        // Stop form from submitting normally
        event.preventDefault();

        // Get some values from elements on the page:
        var $form = $( this ),
            term = $form.find( "input[name='s']" ).val(),
            url = $form.attr( "action" );

        // Send the data using post
        var posting = $.post( url, { s: term } );

        // Put the results in a div
        posting.done(function( data ) {
            var content = $( data ).find( "#content" );
            $( "#result" ).empty().append( content );
        });
    });
</script>

Answer 2

最简单的方法是：

<form id="testContent" onsubmit="testContent()">  //id is important! :P

<script type="text/javascript">
    function testContent() {
        //test your content
        //update your div

        return false;    //you can cancel the submit by returning false
    }
</script>

Answer 3

<script>
   document.forms['test'].onsubmit = function(){ 
      document.getElementById("refresh").innerHTML = "some content";
      return false;
   }
</script>

在您的表单和div标记

下放置。

想要在提交表格后刷新div？

3 个答案: