Форма публикации с использованием AJAX - PullRequest
Новая
       8

Форма публикации с использованием AJAX

0 голосов
/ 23 июня 2018

Может кто-нибудь, пожалуйста, помогите мне с отправкой формы ниже, используя Ajax. Все, что я хочу, это отправить его на страницу trolley1.php для обработки, никаких обратных вызовов или чего-то в этом роде. В основном, скопируйте форму, но отправьте ее с помощью Ajax, чтобы страница не перешла на страницу trolley1.php. Я перепробовал так много методов, но не смог этого сделать. Билл Гейтс или Стив Возняк, если вы, ребята, читаете это, пожалуйста, помогите

Это дает мне консоль $ .Ajax не является функцией консоли 

<script>
$(document).ready(function(){
$('form').submit(function(event){
event.preventDefault();

var form_data = $(this).serialize();   
$.ajax({ 
    url: "trolley1.php",
    type: "POST",
    dataType:"json", 
    data: form_data
}).done(function(data){ 
    alert("Item added to Cart!"); 
    }
});
});
</script>

<?php
echo "
<div class='col-sm-3 mt-5'>
<form class='ajax' method='post' action='trolley1.php?action=add&id=$id'>
  <div class='products'>
      <a>$img</a>
      <input type='hidden' name='id' value='$id'/>
      <input type='hidden' name='name' value='$product'/>
      <input type='hidden' name='price' value='$price'/>
      <input type='text' name='quantity' class='form-control' value='1'/>
      <input type='submit' name='submit' style='margin-top:5px;' class='btn btn-info'
             value='Add to Cart'/>      
  </div>
</form>

1 Ответ

0 голосов
/ 24 июня 2018

В вашем коде JS есть одна синтаксическая ошибка - см. Правильный код 

$(document).ready(function(){
    $('form').submit(function(event){
        event.preventDefault();

        var form_data = $(this).serialize();   
        $.ajax({ 
            url: "trolley1.php",
            type: "POST",
            dataType:"json", 
            data: form_data
        }).done(function(data){ 
            alert("Item added to Cart!"); 
        });
    });
});

И вы используете jQuery в качестве дополнительного javascript-библиотеки. jQuery использует $ для доступа к методам (например, $.ajax). По этой причине вы получаете неопределенную ошибку.

Так что вам нужно сначала загрузить библиотеку в начале вашей страницы (внутри <head>). Например. прямо с их CDN 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

Тогда это должно работать для вас

...