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

最新推荐文章于 2021-08-05 15:03:23 发布

layman1024

最新推荐文章于 2021-08-05 15:03:23 发布

阅读量1.7k

点赞数

分类专栏： HTML

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

</form>

// 通过 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>

layman1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 jQuery 在不刷新的情况下提交 Form 附带官方示范

function submitTheForm() { // 通过 form 的 id 取得 form var $form = $('#formUpdate'); // 很关键 // 得到 form 的提交路径 url = $form.attr('action'); // 得到该 form 的提交路径,并赋值到 url
复制链接

扫一扫