Как правильно передать данные через .ajax () в скрипт PHP?

Question

Я пытаюсь отправить часть данных через jQuery .ajax () в скрипт PHP, который затем будет загружен в контейнер div. Затем скрипт PHP будет работать с этим фрагментом данных, и его содержимое будет возвращено в вышеупомянутый контейнер div.

Изначально я написал этот фрагмент кода (показанный ниже), который успешно добавлял правильные элементы при щелчке, но не мог правильно назвать их, потому что он не передавал переменную count_bucket в PHP.

    var count_bucket = 4;
    var loadPHP = "create_new_bucket.php";  
    $(".add_bucket").click(function(){
       count_bucket++;
       $("#tree_container2").append( $('<div id="bunch' + count_bucket + '">').load(loadPHP));
       return false;
    });

Затем я изменил код на этот (показанный ниже), пытаясь передать переменную count_bucket в скрипт PHP.

var count_bucket = 4;
$(".add_bucket").click(function () {
    count_bucket++;
    var bucket_add = $.ajax ({
        type: "GET",
        url: "create_new_bucket.php",
        data: var count_bucket, 
        dataType: "json",
        async: false,
    }).responseText;
    $('#tree_container2').append( $('<div id="bunch' + count_bucket + '">').load(bucket_add)); 
});

PHP-файл create_new_bucket.php выглядит следующим образом:

<?php
   include_once "test_functions.php"; // include functions page
   $i = $_GET["count_bucket"]; 
   drawBunchNew($i);
?>

Мне неясно, какой аспект .ajax () неверен. Я подозреваю, что неправильно собираю переменную в PHP или использую неверный синтаксис для передачи ее в файл PHP. Если бы кто-нибудь мог помочь мне определить ошибку, я был бы очень признателен.

* UPDATE ******

Спасибо Тейс и Танду. Теперь я понимаю, как структурировать данные, но у меня все еще возникают проблемы с работой всего jQuery. Я воспользовался предложением Танду использовать вместо него .load () и изменил свой PHP, чтобы использовать POST для извлечения данных, но он все еще работает неправильно.

var count_bucket = 4;
$(".add_bucket").click(function () {
    count_bucket++;
    var bucket_add = $.load ("create_new_bucket.php", {count_bucket: count_bucket}, }).responseText;
    $('#tree_container2').append( $('<div id="bunch' + count_bucket + '">').load(bucket_add)); 
});

И PHP это:

<?php
include_once "test_functions.php"; // include functions page
$i = $_POST["count_bucket"]; 
drawBunchNew($i);
?>

Окончательный рабочий jquery, который я использовал (конечный PHP такой же, как указано выше):

    var count_bucket = 4;
    var loadPHP = "create_new_bucket.php";  
    $(".add_bucket").click(function(){
    count_bucket++;
    $("#tree_container2").append( $('<div id="bunch' + count_bucket + '">').load(loadPHP, {count_bucket: count_bucket}));
    return false;
    });

Answer 1

Свойство data запроса ajax будет объектом; думать об этом как JSON:

{ data: var response }

Недействительно JSON. Однако вы можете сделать что-то вроде этого:

data: { myKey: 'myValue', myKey2: 'myValue2' }

Или в вашей ситуации:

data: { count_bucket: 4 }

И он отправит данные, содержащиеся в свойстве data, на ваш сервер как часть этого набора значений имени.

Answer 2

Данные для ajax в jQuery должны передаваться в виде строки в формате строки запроса ('key[]=value&key[]=value&key[]=value') или в виде объекта json ({key: [value, value, value]}).Я верю, что у var у вас будет синтаксическая ошибка.Вам также необходимо указать ключ, поэтому следует либо data: {count_bucket: count_bucket}, либо data: 'count_bucket=' + count_bucket.

Обратите внимание, что нет необходимости использовать .ajax().Обычно лучше использовать .load(), .post() и .get().В вашем случае .load() должно работать нормально.Передайте данные в качестве второго аргумента.

Почему вы не хотите, чтобы запрос был асинхронным?Обратите внимание, что dataType - это тип данных возвращаемого значения, а не того, что вы отправляете.Ты получаешь JSON?Обычно jQuery может угадать это правильно, и если вы установите заголовок на стороне php, это очень поможет.Тип GET также используется по умолчанию.

Последнее замечание: при использовании .load(), если вы передаете данные в виде строки, они будут использовать GET, но если вы передадите их как объект, они будут использовать POST.