我需要帮助使用Ajax，PHP和mySQL将信息发送到我的服务器而不使用表单

问题描述：

All of the tutorials I've looked up only show how to everything works using forms. I want to avoid using a form. Right now i have the code for Javascript to map my answering based on what's clicked and make array thats shown in a alert. (in the end i don't want it to be in a alert but im keeping it in there until i know everythings working) but I think i have the ajax sending the info to the server but i'm not sure if its working. Or how to have php take the ajax information and send it to the server. My server is also connected fine. I'm posting all of my current code. Any help is appreciated. Even if you just send me a link or point me in the right direction that would be great.

I think my biggest question is how to take the array generated in Javascript then call in in Ajax, then Php. since i already made the array what do i call in the Ajax. then how to treat it with a PDO

current jsfiddle

<?php
    include_once('database.php');
    $name = $_POST['name'];
    $choices = $_POST['answers'];
    if(mysql_query("INSERT INTO answers VALUES('$name', '$choices')"))
     echo "Successfully Inserted";
    else
    echo "Insertion Failed";?>

jQuery

 $(document).ready(function() {


   $(function() {
     //catch this values, because you will use these for more than one time
     var answers = [];

     function getAnswers() {
         answers = []; //empty old answers so you can update it
         $.map($('.on'), function(item) {
           answers.push($(item).data('value'));
         });
       }
       //init the answers in case you use it before click
     getAnswers();


     $(document).on('click', 'img', function(e) {
       e.preventDefault();
       $(this).toggleClass('on');

       //trigger the state change when you click on an image
       $(document).trigger('state-change');
     });

     //get answers when event was triggered
     $(document).on('state-change', function(e) {
       getAnswers();
     });

     $('#btn-show').click(function() {
       alert(answers.join(',') || 'nothing was selected');
     });

   });
 });

CSS

#seasoning {
  margin: 8px;
  font-size: 16px;
  height: 100px;
  width: 100px;
}
/* this shows the user which item has been selecting along with making a searchable class for the program */

.on {
  padding: 10px;
  background-color: red;
}

HTML

<html>

<head>
  <LINK REL=StyleSheet HREF="code.css" TYPE="text/css">
  <script type="text/javascript" src="javascript.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <form>
    Name:
    <input type="text" name="name">
  </form>
  <img src="https://i.imgur.com/7HyU4yh.jpg" id="seasoning" data-value="0">
  <br>
  <img src="https://i.imgur.com/OEHCjCK.jpg" id="seasoning" data-value="1">
  <br>

  <button id="btn-show">Submit</button>
</body>

</html>

答

Absolutely:

//    $(document).on("eventOfYourChoice", function() {
// you probably actually want to do:
 $('#btn-show').click(function() {
    $.ajax({
        type: "POST",
        url: "/path/to/script.php",
        data: { 
            "name" : $('input[name="name"]').val(),
            "answers" : answers
        },
        success: function(response){
            alert(response);
    }
    }); 

});

the response variable contains whatever your PHP echoes out --

However, there are a couple of things to note in the code you posted -

1). Filter & Validate your input:

if (is_string($_POST['name']){

$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);

} else { die("That input is not valid"); }

2). Use mysqli_* functions or PDO --- or, you could use an ORM/DBA like idiorm

3). In your JS - $(document).ready(function(){... and $(function() are the same thing. you only really need one.

4). You almost ALWAYS want to include jQuery before any other scripts-- but you don't have to unless your javascript.js contains jQuery code (i.e. anything that begins

---edit----

I missed the "answer" value, earlier - but, since you have images, I'm assuming you want to do something along these lines:

Hope this helps -!

答

You can just use ajax without using a form . suppose your index.php is as below

  <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>

        <input type="text" id="name">
        <input type="submit" id="submit" value="submit">

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script type="text/javascript">

       $(document).ready(function(){

        var name = $('#name').val();

        $('#submit').click(function(){

         $.post('validate.php', {name:name}, function(data){

           alert(data);
        });

       });  

      });

    </script>

    </body>
    </html>

Now create the validate.php file, code there will be something like

if(isset($_POST['name'])){
  //do things with database

   if(//success){

     echo "success";
   }else{
     echo "failure";
   }

}

The output of this page will be alerted in index.php

我需要帮助使用Ajax，PHP和mySQL将信息发送到我的服务器而不使用表单

相关推荐