Как отправить переменную JavaScript в файл PHP через $ .ajax ()

Question

Как отправить JavaScript-переменную exampleId в php-файл https://example.com/widget/widget-updater.php из функции $ .ajax (), приведенной ниже?

jQuery(document).ready(function($) {   

var element = document.getElementById('widget');
var exampleId = element.getAttribute('attributeExample');

alert(exampleId); /* This prints out correctly into a pop up box */



$.ajax({
type: "GET",
url: "https://example.com/widget/widget-updater.php"
});        

})(); 

Я знаю, как получить переменную, если еев PHP с $ _GET ['exampleId'], но я не знаю, как отправить его в файл PHP с помощью функции $ .ajax () выше.Благодарю.

Вот код HTML:

<script 
src="https://example.com/widget/externalJSfileContainingTheCodeBelow.js" 
async></script><div id="widget" dataVar="1"></div>

Вот код Javascript / jQuery

(function () {
var jQuery;
if (window.jQuery === undefined) {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () {
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
  script_tag.onload = scriptLoadHandler;
}
(document.getElementsByTagName("head")[0] ||
  document.documentElement).appendChild(script_tag);
} else {
jQuery = window.jQuery;
main();
}

function scriptLoadHandler() {
jQuery = window.jQuery.noConflict(true);
main();
}

function main() {
jQuery(document).ready(function ($) {

var element = document.getElementById('widget');
var numberVariable = element.getAttribute('dataVar');
alert(numberVariable);

$.ajax({
type: "GET",
url: "https://example.com/widget/widget-updater.php",
data: { id: numberVariable }
});
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "https://example.com/widget/widget.css"
});
css_link.appendTo('head');
var jsonp_url = "https://example.com/cgi-bin/data.py?callback=?";
$.getJSON(jsonp_url, function (data) {
$('#widget').html(data.html);
});
});
}
})(); 

Answer 1

Если вы используете ответ GET, вы можете передавать данные в параметре запроса.

Ваш URL ajax будет выглядеть следующим образом: https://example.com/widget/widget-updater.php?exampleId=YOURDATA

$.ajax({
type: "GET",
url: "https://example.com/widget/widget-updater.php?exampleId=data"
});        

Из PHP вы можете использовать $_GET['exampleId'] и собирается дать вам data

Answer 2

Поскольку вы используете method из GET, вы можете просто добавить свой URL IE:

$.ajax({
type: "GET",
url: "https://example.com/widget/widget-updater.php?id=12345&foo=bar"
});

АЛЬТЕРНАТИВНО вы можете использовать атрибут data в .ajax() IE

$.ajax({
type: "GET",
data:{id : '123456', foo: 'bar'},
url: "https://example.com/widget/widget-updater.php"
});

Answer 3

Просто добавьте объект data в конфигурацию ajax.

$.ajax({
   type: "GET",
   data:{'exampleId' : exampleId},
   url: "https://example.com/widget/widget-updater.php"
});

Внутренне jQuery создаст строку запроса в URL из этого, когда это GET, и станет

"https://example.com/widget/widget-updater.php?exampleId=12345"

Вместо этого вы можете вручную создать строку запроса, но использование объектачище и меньше работы и меньше ошибок