使用內置 jQuery 以默認設置發送 ajax 表單數據

Question

源代碼：

<?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST'){
        header('Content-Type: application/json');
        echo json_encode($_POST);
        exit(0);
    }
?>

<html>
<head>
    <title>Web Test</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <form id="formTest">
      <input name="username" value="admin" />
      <input name="password" type="password" value="admin_pass" />
    </form>
    <script type="text/javascript">
      $.ajaxSetup({
        data: {role: 'admin'} //(I)
      });

      //Ajax to current page
      $.ajax('test', {
        method: 'post',
        data: $('#formTest').serialize()  //(II)
        ,success: function(res){
          console.log(res);
        }
      });
    </script>
</body>
</html>

我想通過 jQuery AJAX 發送表單數據，並將默認數據 ( role=admin ) 附加到每個 AJAX 請求，但它無法正常工作。

我采取一些如下的選擇：

data: {role: 'admin'} //(I) （默認數據）
data: $('#formTest').serialize() //(II) （用於表單數據）
（這和上面的源代碼完全一樣）
=> 來自控制台的結果： {username: "admin", password: "admin_pass"}
所以，這種方法似乎行不通
data: 'role=admin' //(I)
data: $('#formTest').serialize() //(II)
（相同的 URLencoded 格式）
=> 同上
data: [{name: 'role', value: 'admin'}] //(I)
data: $('#formTest').serializeArray() //(II)
（相同的 serializeArray 格式）
=> 同上
data: {role: 'admin'} //(I)
data: {username: 'admin', password: 'admin_pass'} //(II)
=> 這種方法有效！ 但是沒有內置的jQuery 方法可以將表單數據轉換為對象。 我必須使用“第三方”解決方案 use $('#formTest').serializeObject() (from here )。

那么，有沒有什么辦法可以只用jQuery來解決這個問題呢？
JQuery 提供ajaxSetup和serialize/serializeArray方法，但它們似乎不能很好地相互配合。

Answer 1

為什么不附加一個帶有所需數據的變量？

<html>
<head>
    <title>Web Test</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <form id="formTest">
      <input name="username" value="admin" />
      <input name="password" type="password" value="admin_pass" />
    </form>
    <script>

    var theRole = '&role=admin';

    //Ajax to current page
    $.ajax('test.php', {
        method: 'post',
        data: $('#formTest').serialize() + theRole,
        success: function(res) {
            console.log(res);
        }
    });
    </script>
</body>
</html>

編輯

另一種方法，使用 ajaxSetup()

<html>
<head>
    <title>Web Test</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <form id="formTest">
      <input name="username" value="admin" />
      <input name="password" type="password" value="admin_pass" />
    </form>
    <script>
    $.ajaxSetup({ data: {role: 'admin'} });

    //Ajax to current page
    $.ajax('test.php?' + $('#formTest').serialize(), {
        method: 'post',
        success: function(res) {
            console.log(res);
        }
    });
    </script>
</body>
</html>

然后必須使用 json_encode( $_REQUEST ) 代替。

<?php

if( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
    header( 'Content-Type: application/json' );
    echo json_encode( $_REQUEST );
}

?>

使用內置 jQuery 以默認設置發送 ajax 表單數據

問題描述

1 個解決方案

解決方案1
2 已采納 2015-10-11 16:45:34

使用內置 jQuery 以默認設置發送 ajax 表單數據

問題描述

1 個解決方案

解決方案1 2 已采納 2015-10-11 16:45:34

解決方案1
2 已采納 2015-10-11 16:45:34