我查阅的所有教程都只展示了如何使用表单进行所有操作。我想避免使用表单。现在我有了Javascript的代码,可以根据点击的内容映射我的答案,并制作一个显示在警报中的数组。(最后,我不想让它处于警报状态,但我会把它放在那里,直到我知道一切正常为止)但我想我有ajax将信息发送到服务器,但我不确定它是否正常。或者如何让php获取ajax信息并将其发送到服务器。我的服务器也连接良好。我正在发布我当前的所有代码。感谢您的帮助。即使你只是给我发一个链接或给我指明正确的方向,那也太好了。
我认为我最大的问题是如何获取在Javascript中生成的数组,然后在Ajax中调用,然后在Php中调用。因为我已经制作了数组,我在Ajax中调用什么。然后如何用PDO 处理
当前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>
绝对:
// $(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(),
"answerswers" : 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的白痴
3) 。在你的JS中,$(document).ready(function(){...
和$(function()
是一样的。你只需要一个。
4) 。您几乎总是希望在任何其他脚本之前包含jQuery,但除非您的javascript.js
包含jQuery代码(即任何以开头的代码
---编辑----
我错过了之前的"答案"值,但是,既然你有图像,我假设你想做一些类似的事情:
希望这能有所帮助!
您可以只使用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