Develop Reference

How can get data from html form and javascript array using PHP and AJAX

I'm sending a HTML form and javascript array using AJAX post method. But I can't get my data in the PHP file.
$.post("addOrder.php", {
"form": $("#placeOrderForm").serialize(),
"array": array
}, function(responce) {});

Please read the docs clearly.
The update code:
$.post("addOrder.php",
$("#placeOrderForm").serialize(),
function(response) {
}
);
And in addOrder.php, print the posted array using.
echo '<pre>';print_r($_POST);echo '</pre>';
If you are using firebug, you will get the posted variables' array in response tab.

// You can access the values posted by jQuery.ajax
// through the global variable $_POST, like this:
$var = isset($_POST['var']) ? $_POST['var'] : null;

Can you try something like below:
var request = $.ajax({
url: "addOrder.php",
type: "POST",
data: {<data1> : <val1>},
dataType: "html"
});
request.done(function(msg) {
$("#log").html( msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
Looks like you passing argument is having issue.

In addForm.php try this:
var_dump($_POST)
This will enable you to inspect the form data posted.

Try something like this in your php file:
$params = array();
echo parse_str($_POST, $params);

Thanks everyone. I found my answer. I used "serializeArray" for sending form.
html
<form id="placeOrderForm">
<input name="po">
<input name="desc">
</form>
javascript
var array = [1,2];
$.post("addOrder.php",{
"form":$("#placeOrderForm").serializeArray(),
"array":array
}, function (responce) {});
php
$form_input_data_1 = $_POST['form'][0]['value']; // get po's data
$form_input_data_2 = $_POST['form'][1]['value']; // get desc's data
$array_index_1_data = $_POST['array'][0]; // get 1
$array_index_2_data = $_POST['array'][1]; // get 2

Pulling information from another website - Javascript/jQuery

I'm currently just trying to test and find out how to pull information from cnn.com and get the some of the titles of the articles with the class name, "cd__headline-text." However, when I use the $.ajax function to get the titles of the articles on cnn with that class name I get an error that says response.getElementsByClassName is not a function.
Below is the code that prompts this error to happen:
$(document).ready(function(){
$("button").click(function(){
console.log("hi test");
$.ajax({
url: "https://www.cnn.com",
cache: false,
success: function(response){
filter = response.getElementsByClassName("cd__headline-text");
console.log(filter);
}
});
});
});
My current console.log(response); output is in this link:
https://pastebin.com/SsBSPdBL

However, when I use the $.ajax function to get the titles of the
articles on cnn with that class name I get an error that says
response.getElementsByClassName is not a function.
Because response is not a Node or DOM element.
You need to parse the XML and find the element by attribute
xmlDoc = $.parseXML( response ),
$xml = $( xmlDoc ),
and now get the required value from it
$title = $xml.find( "[class='cd__headline-text']" );
or
$title = $xml.find( ".cd__headline-text" );
Or if the value is already an HTML, then simply
$( response ).find( ".cd__headline-text" )

Try this, or check URL
$(document).ready(function(){
$("button").click(function(){
console.log("hi test");
$.ajax({
url: "https://www.cnn.com",
cache: false,
success: function(response){
$(response).find('.cd__headline-text').each(function(){
console.log($(this).html());
});
}
});
});
});
Hope this will help you.

How to change specific element on ajax ?

I have ajax call that change the user info. And I want to get the value from the response and change value of specific element
Example: the element that need to chage:
<div id="changeMe"><!-- New Value --> </div>
Ajax call:
$.ajax({
url: "?rr=profile",
}).success(function(response) {
});
How to change the value of the "changeMe" element ONLY ?

Try it with
$.ajax({
url: "?rr=profile",
}).success(function(response) {
var r = $( response ).find( "#changeMe" );
$( "#changeMe" ).html( r.html() );
});

You could do this:
$.ajax({
url: "?rr=profile",
}).success(function(response) {
$('#changeMe').html('Your new content');
});
This will change the element with the ID "changeMe". See also JQuery API
To get a value you can use the same method.
Example:
var res = $('#someOtherElement').html();
The variable res has now the content of the element.

You can do it by following line.
$('#changeMe').html(response);

You can use the .html() or .text() jQuery methods depending on your requirements (whether the response content is HTML or plain text):
$.ajax({
url: "?rr=profile",
}).success(function(response) {
$('#changeMe').html(response);
});
switch .html(response) with .text(response) if that's better for you.

In your success function your can do like below
.success(function(response) {
$("#changeMe").append("Your value");
});

If you want to change the text then :
$('#changeMe').text('new data from response');
If you want to change CSS as well :
$('#changeMe').css('property', 'attribute');

Put json result from php script into divs jQuery

I have two divs, each one should have a record name from a json result.
<div class="first"></div>
<div class="second"></div>
My json file is as follows :
[{"Name":"name1","Instruction":"instr"},
{"Name":"name2","Instruction":"instr again"}]
I want to put in the first div's value, the ‘Name‘ value of the first record, same for the second div but with the second record.
I'm using jQuery :
<script>
$(document).ready(function() {
$.post("data/result.php",
function(data) {
//alert("Data: " + data);
$('div.first').append(data.Name); //data.Name returns undefined
}
);
});
</script>
Any help would be appreciated.

as far as you are using post for you ajax call, the data returns as a json string, do this:
$(document).ready(function() {
$.post("data/result.php",
function(data) {
data = JSON.parse(data);
$('div.first').append(data[0].Name);
$('div.second').append(data[1].Name);
}
);
});

As previously mentioned you need to parse the result as json. You could use the built in parser in jquery. Like this:
<script>
$(document).ready(function() {
$.ajax({
url: 'data/result.php',
type: 'POST',
dataType: 'json',
success : function (data) {
$('div.first').append(data[0].Name);
}
});
});
</script>

First of all, you can give a datatype with a request:
$.post('data/result.php',function(data) { },'JSON');
If you are not posting any information, why not just use $.get ? (it's the same syntax btw)
$.post('data/result.php',function(data) {
var $first = $('div.first'),
$second = $('div.second');
$first.text(data[0].Name);
$second.text(data[1].Name);
},'JSON');
Also, if you use .append(..) it will be appended to whatever is already in the div. If that is your intention, use .append(...). However, if you want to replace the content of it, even if it is empty, use .text(...) or .html(...)

Sending the body of a page to another server?

Is it possible to send the body of a page (i.e. all of the HTML code/DOM) from a page on one server to another and then receive a response? The method used doesn't really matter, but I do have access to jQuery functions if that helps.

You could do this by sending...
$("html").html();
...in an ajax call:
var data = $("html").html();
$.ajax({
url: "/echo/json/",
data: data,
type: "POST"
}).done(function(res) {
console.log(res);
});
Working jsFiddle: http://jsfiddle.net/brandonscript/p5zEW/
(See console for body output).

Something like this should work:
$.get( "somePage.html",
function( pageData ) {
$.post("targetPage.php", pageData, function( data ) {
alert("Done!");
},
"html"
);
});