<html>
<body>
<h1> It is a minion with one eye or two eyes</h1>
<div id="aside">
<canvas id="mycanvas" width="600" height="500" style="border:1px solid #c3c3c3;">
</canvas>
<script>
var bodyStyle = document.body.style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
canvas.style.position = 'absolute';
var imgs = ['p_2.jpg','p_3.jpg','p_4.jpg','p_5.jpg','p_6.jpg','p_7.jpg','p_8.jpg','p_9.jpg','p_10.jpg','p_12.jpg'
,'p_12.jpg','p_13.jpg','p_14.jpg','p_15.jpg','p_16.jpg','p_17.jpg','p_18.jpg','p_19.jpg','p_20.jpg','p_21.jpg','p_22.jpg',
'p_23.jpg','p_24.jpg','p_25.jpg','p_26.jpg'];
var num = Math.floor(Math.random()*24);
var effort=0;
img.src = imgs[num];
img.addEventListener('load', function(e) {
var ctx;
// var w = img.width,
// h = img.height;
var w=600;
h=500;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;
function layer(ctx) {
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h);
}
function eventDown(e){
e.preventDefault();
mousedown=true;
}
function eventUp(e){
e.preventDefault();
mousedown=false;
var data=ctx.getImageData(0,0,w,h).data;
for(var i=0,j=0;i< data.length;i+=4){
if(data[i] && data[i+1] && data[i+2] && data[i+3]){
j++;
}
effort=1-j/(w*h);
}
if(j<=w*h*0.2){
ctx.fillRect(0, 0, w, h);
alert('ok');
}
}
function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx) {
beginPath()
//arc(x, y, 10, 0, Math.PI * 2);//绘制圆点
rect(x,y,50,50);
fill();
}
}
}
canvas.width=w;
canvas.height=h;
canvas.style.backgroundImage='url('+img.src+')';
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent';
ctx.fillRect(0, 0, w, h);
layer(ctx);
ctx.globalCompositeOperation = 'destination-out';
canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
});
</script>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
alert("already submit");
var taskid=num;
var name=$("#name").val();
var guessnum=$("#guessnum").val();
$.ajax({
type:"post",
url:"GameMysql.php",
data:"name="+name+"&taskid="+taskid+"&guessnum="+guessnum+"&effort="+effort,
success:function(data){
$("#article").html(data);
}
});
});
});
</script>
<div id="article" >
<form>
name : <input type="text" name="name" id="name"/>
</br>
<!-- guessNum: <input type="number" name="guessnum" id="guessnum"> -->
Select your guessNum: <br/ >
<input type="radio" name="guessnum" value="1" id="guessnum" /> 1
</br >
<input type="radio" name="guessnum" value="2" id="guessnum" /> 2
</br >
<input type="radio" name="guessnum" value="3" id="guessnum" /> 3
</br >
<input type="radio" name="guessnum" value="4" id="guessnum" /> 4
<br />
<input type="button" value="Send Guess" id="submit">
<!-- <input type="submit" value="Continue the Game" action="http://localhost.game5.php"> -->
</form>
1 我使用按钮和单选按钮提交表单，ajax通过id(#guessnum)读取guessNum数据，但无论客户端提交什么，它总是收到1，不知道为什么？
2 如果我想在ajax的成功函数中添加一个url链接，我该怎么做？谢谢。
最佳答案
id 应该是唯一的，但您对 4 个元素使用 guessnum。您可以删除 id 并选择名称:
$("input[name=guessnum]").val();
但是，这不会给您正确的答案，因为它总是会为您提供具有该名称的第一个输入的值 - 无论它是否被选择。
这样做:
$("input[name=guessnum]:checked").val();
示例:
$('button').click(function() {
alert($("input[name=guessnum]:checked").val());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="guessnum" value="1" id="guessnum" /> 1 <br>
<input type="radio" name="guessnum" value="2" id="guessnum" /> 2 <br>
<input type="radio" name="guessnum" value="3" id="guessnum" /> 3 <br>
<input type="radio" name="guessnum" value="4" id="guessnum" /> 4
<br>
<button id="b1">Show value</button>关于javascript - 使用按钮和单选按钮提交表单，但总是相同的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29446560/