您的位置：首页 > Web前端 > JQuery

使用 jQuery 在不刷新的情况下提交 Form 附带官方示范

2017-06-08 21:22 435 查看

<form id="formUpdate" action="/updateinfo?fun=update" method="post" target="_self">
<input id="id_user" name="id_user" type="hidden" value="0001">
<input name="button" type="submit" value="OK" onclick="submitTheForm()" />
</form>

<script lang="jscript">

    function submitTheForm()

    {
        // 通过 form 的 id 取得 form

        var $form = $('#formUpdate'); // 很关键
        // 得到 form 的提交路径

        url = $form.attr('action'); // 得到该 form 的提交路径,并赋值到 url
        // 以 post 方式提交, 回调函数function 返回 data
        var i = $.post(url, $form.serialize(), function(data)

        {
            // 显示返回信息
            alert(data);

        });
        // 另外一种形式 jQuery.post(url, $form.serialize()); 也可以

    }

</script>

jQuery 官方网站 http://jquery.com/

Examples:

Example: Request the test.php page, but ignore the return results.

$.post("test.php");

Example: Request the test.php page and send some additional data along (while still ignoring the return results).

$.post("test.php", { name: "John", time: "2pm" } );

Example: pass arrays of data to the server (while still ignoring the return results).

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

Example: send form data using ajax requests

$.post("test.php", $("#testform").serialize());

Example: Alert out the results from requesting test.php (HTML or XML, depending on what was
returned).

$.post("test.php", function(data) { 
   alert("Data Loaded: " + data); 
 });

Example: Alert out the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).

$.post("test.php", { name: "John", time: "2pm" }, 
   function(data) { 
     alert("Data Loaded: " + data); 
   });

Example: Gets the test.php page content, store it in a XMLHttpResponse object and applies the process() JavaScript function.

$.post("test.php", { name: "John", time: "2pm" }, 
 function(data) { 
   process(data); 
 },  
 "xml" 
);

Example: Posts to the test.php page and gets contents which has been returned in json format (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>).

$.post("test.php", { "func": "getNameAndTime" }, 
 function(data){ 
   console.log(data.name); // John 
   console.log(data.time); //  2pm 
 }, "json");

Example: Post a form using ajax and put results in a div

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<form action="/" id="searchForm">

   <input type="text" name="s" placeholder="Search..." />

   <input type="submit" value="Search" />

</form>



<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 and put the results in a div */

    $.post( url, { s: term }, function( data )

      {

          var content = $( data ).find( '#content' );

          $( "#result" ).empty().append( content );

      }

    );

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航