Using jQuery to change AJAX response

Question

When an AJAX call returns html, can jQuery be used to change the contents of the response string? If so, how to do it?

EDIT:

This question is intended to edit the answer before writing it to the page

Answer 1

Well, it depends on how you request the data. If you have $ .ajax, etc., you can make the necessary changes to the success handler. I assume that since you are not very good at jQuery, you use $ .load () to load the data, in which case it is easiest to replace it with

$.get('/somecode.php', function(data) { data = $(data); // Find and remove all anchor tags for example data.find('a').remove(); $('#target-id').append(data); }); 

Or, if you do not want to create a jQuery object, you can easily do something like

 $.get('/somecode.php', function(data) { // Replace all strings "foo" with "bar" for example data = data.replace('foo', 'bar'); // Manually append it to DOM or do whatever you want with it $('#target-id').append(data); }); 

Answer 2

in a callback function that looks something like

 function(response){ response = //edit response here $("#content").html(response); } 

Answer 3

If you are using jquery 1.5+, you can use ajax datafilter.

The dataFilter callback function is called immediately after successfully receiving the response data. > It receives the returned data and the dataType value and must return (possibly> changed) data in order to proceed to success.

Code example:

 $.ajaxSetup({ dataFilter: function (response, type) { response = response.replace(/username/g, 'Sina Salek'); return response; } }); 

https://api.jquery.com/jquery.ajax/

Answer 4

You can edit the contents of the returned data using jQuery, converting the data itself into a jquery object.

 $.get(file.html, function(data){ var $obj = $('<div>').html(data); //explaination of this below $obj.find("span").remove(); //just an example, this removes all the SPANs $("#destination").html($obj.first('div').html()); }); 

Please note that before editing you need to wrap the returned data in a DIV, because if your returned data does not have a valid root node in the HTML structure, the jQuery object will not be able to modify using find and other functions.

For this reason, it is good practice to transfer the returned data, change it, and then expand it before inserting it into the target html node.

Answer 5

Edited on the recommendation of maximum accuracy:

You can directly manipulate the returned string, as indicated in the genesis (no need for jQuery), or you can recreate new output by parsing html using a helper library like jParse:

http://jparse.kylerush.net/demo

Answer 6

Not. jQuery will only work with DOM elements. Therefore, until they are created from a string, all you have is ... a string.

May I ask why you are worried about this? If this is a performance issue (i.e. you create a ton of DOM elements with an AJAX response and then edit a lot of them using jQuery), then most likely your PHP script should be modified to return a more desirable answer. If the problem is that you don’t want users to see the answer until the DOM modifications have been made by jQuery, then just paste all this into a hidden div (display: none) until the changes are complete.

Edit - exception 1 jQuery has a $ .trim () function that removes spaces from the beginning and end of a line. Not sure if there are others.