How to send more data through AJAX/JS

Question

In my code snippet below my Ajax will send some data to response.php. How should i proceed if I want to send more data through Ajax? I want to add for example user_id as shown in my HTML code at the bottom.

$(document).ready(function() {

    $("#FormSubmit").click(function (e) {
            e.preventDefault();
            if($("#contentText").val()==='')
            {
                alert("Du følger allerede denne bloggen");
                return false;
            }
            var myData = 'content_txt='+ $("#contentText").val(); 
            jQuery.ajax({
            type: "POST", 
            url: "assets/plugin/ajax-follow/response.php", 
            dataType:"text", 
            data:myData, 
            success:function(response){
                $("#responds").append(response);
                $("#contentText").val(''); 
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }
            });
    });

});

HTML

<div class="form_style">
<input type="hidden" name="content_txt" id="contentText" value="'.$user_info[u_id].'">
<input type="hidden" name="user_id" id="userid" value="'.$whotofollow[u_id].'">
<button id="FormSubmit">Følg</button>
</div>

Answer 1

Use JSON

$(document).ready(function() {

$("#FormSubmit").click(function (e) {
        e.preventDefault();
        if($("#contentText").val()==='')
        {
            alert("Du følger allerede denne bloggen");
            return false;
        }
      var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
      var userId = $("#user_id").val();
      var JsonData = {userId : userId,myData : myData};       // Build a JSON object 

        jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "assets/plugin/ajax-follow/response.php", //Where to make Ajax calls
        dataType:"JSON", // Data type, HTML, json etc.
        data : JsonData, //Form variables
        success:function(response){
            $("#responds").append(response);
            $("#contentText").val(''); //empty text field on successful
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError);
        }
        });
});

});

Answer 2

You can manual build postData like:

var myData ={

content_txt:$("#contentText").val(),

user_id:$('#user_id').val()
}

But jquery provide a method that automatic build form data for you!

var str = $("formabc").serialize();

you need wrap all element you want send to server in a form with id="formabc"

Change your html to:

<div class="form_style">
<form id="formabc">
<input type="hidden" name="content_txt" id="contentText" value="'.$user_info[u_id].'">
<input type="hidden" name="user_id" id="userid" value="'.$whotofollow[u_id].'">
<button id="FormSubmit">Følg</button>
</form>
</div>

Answer 3

You don't have to use JSON. All you have to do is create a String (append to myData in your example) with the payload and send it to your server.