jQuery+PHP. Request/Response

Question

I would search for the solution, but I don't know what exactly do I have to search.

The task is to grab texts with ID's (#ftext_1,..._2,..._3,..._4) in html file and send them to php file. After some manipulation with texts in php file I have to insert them back into their ID's in html file. Here is the code:

var text_1_Replace = $('#ftext_1').text();
var text_2_Replace = $('#ftext_2').text();
var text_3_Replace = $('#ftext_3').text();
var text_4_Replace = $('#ftext_4').text();

$('#ID').on('click', function(){
var text= {
        ftext_1: text_1_Replace,
        ftext_2: text_2_Replace,
        ftext_3: text_3_Replace,
        ftext_4: text_4_Replace
    }
     var targetFile = 'ajax/file.php';

    $.ajax({
        method: 'post',
        url: targetFile ,
        data: JSON.stringify(text),
        contentType: 'application/JSON'
    }).done(function(data) {
       console.log(data);
    });
});

How do I edit .done function to place new texts in their old ID's(#ftext_1,..._2,..._3,..._4)? The variable with texts array is $result.

so the answer is :

}).done(function(data) {
        var text = JSON.parse(data);

        var text1 = text.ftext_1;
        var text2 = text.ftext_2;
        var text3 = text.ftext_3;
        var text4 = text.ftext_4;
        $('#ftext_1').text(text1);
        $('#ftext_2').text(text2);
        $('#ftext_3').text(text3);
        $('#ftext_4').text(text4);

So, the last update for the topic: The real and nice answer is:

.done(function(data) {
        var text = JSON.parse(data);
        $.each(text, function(i, val){
            $("#" + i).text(val);
        });

This code is the solution to my question in this topic. Thank you all, who responded!

Answer 1

The best for you would be send named property that looks like this

$.ajax({
    method: 'post',
    url: targetFile ,
    data: {data: text},
    dataType: "json",
    success: function(response){
       $.each(response, function(element){
          $("#"+element.name).text(element.text);
       });
    }
});

Then in your php you could easily iterate data from post

<?php
$data = $_POST['data'];

$response  = [

];
foreach($data as $elementName => $text){
 // some text management

   $response[] = ['name' => $elementName, 'text' => $text];
}

return json_encode($response);

Answer 2

When you change your received values in php you put them in an array so that you can call it later easily

PHP

$values = array("one"=>5,
                "two"=>"something",
                "three"=>$something);
echo json_encode($values);

You need to add

dataType:'json' 

in Jquery since you're returning json

JQuery

$.ajax({
    method: 'post',
    url: targetFile ,
    data: JSON.stringify(text), # or data: {"value1":value,"value2":value2},
    contentType: 'application/JSON',
    dataType:'json',
    success: function(response){
        console.log(response.one); #Will console 5
        console.log(response.two); #Will console "something"
        console.log(response.three); #Will console whatever $something holds in php
  }
  });

You can call it however you want it (response) or (mydata)... And then you just type response.yourdata (that you declared in php)