AJAX не отправляет пользовательский ввод из формы в PHP-скрипт

Question

Я пытаюсь изучить основные AJAX и Javascript, следуя различным учебным пособиям и примерам в Интернете, но я ударил стену. Я пытаюсь написать простой скрипт для ввода пользовательского ввода из формы с использованием AJAX и отправки его на PHP-скрипт, который затем просто вызывает эхо ввода.

Все, что я действительно могу сказать, это то, что все, что вводится, не проходит, но я пока не могу сказать, почему. Я пробовал как с POST, так и с GET, и с различными типами данных, с тем же результатом. Я уверен, что я что-то делаю неправильно или что-то недопонимаю, но я не уверен, что.

HTML/AJAX

<form id="my_form"> 
    word <input type ="text" id="word1"/><br/> 
    <input type="submit"> 
</form> 
<script> 
$(document).ready(function(){ 
    $("#my_form").on(function(e){ 
     e.preventDefault(); 
     var verb = $("word1").val(); 
     $.ajax({ 
      url: "testrun.php", 
      data: "verb", 
      type: "POST", 
     });   
    }); 
}); 
</script> 

PHP

if (isset($_POST['verb'])){ 
    $x= $_POST['verb']; 
    echo $x; 
}else { 
    echo "not working"; 
} 

EDIT: Я попробовал несколько из предложений до сих пор, копирование и вставка их непосредственно, и ни один из них действительно сделали все, что я вижу. Я думаю, что я начинаю понимать немного больше о том, как AJAX должен работать, основываясь на ответах, но по-прежнему не доходит до PHP. Я пробовал оба с AJAX/HTML в отдельном файле, который вызывает сценарий testrun.php и помещает все в файл testrun.php и в основном сам называет себя AJAX, но ни один из них ничего не добился.

Если AJAX, который я получил из ответов, в порядке, то я что-то не понимаю в том, как PHP должен быть настроен для фактического получения данных POST? Я все еще довольно потерян.

Answer 1

Три изменения: -

1. var verb = $ ("word1").val(); нужно быть var verb = $ ("#word1").val();, потому что его идентификатор (word1)

2. data: "verb", потребности быть data: {"verb":verb},

3 .form представления должны быть правильным, код, указанный ниже (отсутствует submit): -

Правильный код: -

$(document).ready(function(){ 
    $("#my_form").on('submit',function(e){ // check here you have one missing `submit` 
     e.preventDefault(); 
     var verb = $("#word1").val(); // remove space between `$` and `(` 
     $.ajax({ 
      url: "testrun.php", 
      data: {"verb":verb}, 
      type: "POST", 
     }); 
    }); 
}); 

Answer 2

Вы должны сделать это:

var verb = $("#word1").val(); //Don't forget to add # 
$.ajax({ 
    url: "testrun.php", 
    data: {"verb":verb}, 
    type: "POST", 
}); 

verb является переменной, не нужно ставить между нами!

Правильный ответ HERE по Anant

Answer 3

вы пропустите, чтобы дать # знак в var verb = $("word1").val();

и использовать переменную просто как переменная к data, как data: {"your_var_name" : verb}

Answer 4

Попробуйте это ...

$.ajax({ 
 
    type: "POST", 
 
    url: "testrun.php", 
 
    data: "paramname=value", // access in php $_POST['paramname'] 
 
    success: function(data){ 
 
    // if page request is success 
 
    }, 
 
    error: function(data){ 
 
    // if page request failes 
 
    } 
 
});

Answer 5

1. Вы забыли # селектор недоброжелатель идентификатору word1.
2. .on() требуется событие для привязки. В вашем случае подать форму, это submit

3. Данные должны быть переданы как объект. В вашем случае, вы сможете получить к нему доступ с $_POST['verb']

   $(document).ready(function() 
   { 
       $("#my_form").on('submit', function (e) 
       { 
        e.preventDefault(); 
        var verb = $("#word1").val(); 
        $.ajax({ 
         url: "testrun.php", 
         data: {verb: verb}, 
         type: "POST" 
        }); 
       }); 
   }); 
   

Answer 6

Вы не можете отправить данные как data: "verb", в Ajax. вам необходимо отправить свои данные в params.

Во-вторых, вы не можете получить значение word1 ввода как $("word1").val();, вам нужно использовать # для получения ввода по идентификаторам. .

Пример:

$(document).ready(function(){ 
    $("#my_form").submit(function(e) { //CHANGED using submit event. 
     e.preventDefault(); 
     var verb = $("#word1").val(); //CHANGED 
     $.ajax({ 
     url: "testrun.php", 
     data: "verb="+verb, //CHANGED 
     type: "POST", 
     }); 
    }); 
});