Use built-in jQuery to send ajax form data with default setup

Question

Source code:

<?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>

I want to send the form data by jQuery AJAX, and append default data (role=admin) to every AJAX request, but it doesn't work as I want.

I take some option like below:

data: {role: 'admin'} //(I) (for default data)
data: $('#formTest').serialize() //(II) (for form data)
(This is exactly as the source code above)
=> RESULT from console: {username: "admin", password: "admin_pass"}
So, this approach seem does not work
data: 'role=admin' //(I)
data: $('#formTest').serialize() //(II)
(Same URLencoded format)
=> Same as above
data: [{name: 'role', value: 'admin'}] //(I)
data: $('#formTest').serializeArray() //(II)
(Same serializeArray format)
=> Same as above
data: {role: 'admin'} //(I)
data: {username: 'admin', password: 'admin_pass'} //(II)
=> This approach works! But there is no built-in jQuery method to convert form data to object like that. I must use a "thirt-party" solution use $('#formTest').serializeObject() (from here).

So, is there any way to solve this problem with jQuery only?
JQuery offer ajaxSetup and serialize/serializeArray method but they seem not play well with each other.

BornKillaz · Accepted Answer · 2015-10-11T17:52:58.897

2

Why just not append a variable with the desirable data?

<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>

EDIT

Another approach, using 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>

Must then use json_encode( $_REQUEST ) instead.

<?php

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

?>

edited Oct 11 '15 at 17:52

answered Oct 11 '15 at 16:45

BornKillaz

592
7
19

if I have multiple ajax request, I must manually add `ajaxSetup` to each of them. I want the power of the `ajaxSetup` method – phibao37 Oct 11 '15 at 17:09
The problem is that ajax() call will always overwrite data previously set by ajaxSetup(), and as far as I know, there is no way around... – BornKillaz Oct 11 '15 at 17:15
not always, if both `data` field are object, it will be merged. Maybe I must use `3rd party-serializeObject` instead :) – phibao37 Oct 11 '15 at 17:24
I've just edited my answer with another approach...using ajaxSetup(). – BornKillaz Oct 11 '15 at 17:30
Thank for your answer. It works with `json_encode($_REQUEST)` and the form has small data – phibao37 Oct 11 '15 at 17:41
Yes, sorry, I forgot to mention that! I'll be adding that to my answer, for others who need it. – BornKillaz Oct 11 '15 at 17:48

Use built-in jQuery to send ajax form data with default setup

1 Answers1