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

我查阅的所有教程只显示了如何使用表单进行工作。我想避免使用表单。现在我有Javascript的代码映射我的回答基于点击什么，并使警报中显示的数组。（最后，我不希望它处于警戒状态，但是直到我知道所有工作都会保持在那里），但是我认为我有ajax将信息发送到服务器，但我不确定它是否工作。或者如何让php获取ajax信息并将其发送到服务器。我的服务器也连接正常。我发布了所有当前的代码。任何帮助表示赞赏。即使你只是给我一个链接或指向我的方向，这将是伟大的。我需要帮助使用Ajax，PHP和mySQL将信息发送到我的服务器而不使用表格

我认为我最大的问题是如何把JavaScript中生成的数组，然后调用Ajax，然后Php。因为我已经创建了数组，我在Ajax中调用了什么。那么如何用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>

治疗呢

来源

2014-10-17 tearisha

我不没有看到您的JavaScript中的任何Ajax请求。 – jeroen 2014-10-17 20:09:44

我想可能是因为意外而误将我的php代码改写为ajax，并且忘记了它。现在不适合工作 – tearisha 2014-10-17 20:12:07

请确保您将有关从“click”功能中点击哪个元素的信息传递给其他功能。 – jeroen 2014-10-17 20:14:02

绝对：

// $(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); 
    } 
    }); 

});

的response变量包含你的PHP呼应了什么 -

不过，也有几件事情在你发布的代码要注意 -

1）。筛选器&验证您的输入：

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

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

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

2）。使用mysqli_ *函数或PDO ---或者，您可以使用一个ORM/DBA，如idiorm

3）。在你的JS - $(document).ready(function(){...和$(function()是同样的事情。你只需要一个。 4）。你几乎总是需要的任何其他scripts--之前，包括jQuery的，但你不有，除非你javascript.js包含jQuery代码（即任何东西，开始

---编辑----

我错过了“答案”的价值，早 - 但是，既然你有图片，我假设你想要做的东西沿着这些路线：

希望这有助于 -

来源

2014-10-17 20:24:45

我觉得你忘了在“沿着这些线”之后放置一些东西。我有答案变量作为一个数组目前 – tearisha 2014-10-18 00:19:42

其实，我忘了把它拿出来......只要该数组得到正确填充，那么这应该是一个合适的答案。如果我需要在其他地方详细说明，请告诉我。 – 2014-10-18 00:46:24

再次打招呼。我做了你的建议，但谷歌给了我一个错误“未捕获的ReferenceError：答案没有定义”在答案中：回答ajax的一部分 – tearisha 2014-10-19 20:33:31

你可以使用AJAX，而无需使用！形式。假设你index.php是如下

<!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>

现在创建validate.php文件，代码会有类似

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

    if(//success){ 

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

}

此页的输出将在index.php中提醒

来源

2014-10-17 20:33:26 user1906399

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

回答

相关问题