使用JQuery和Ajax发布表单

我想使用ajax发布我的表单

我想单选按钮来做这件事（没有提交按钮）

因此，单击单选按钮将导致提交或发布表单

我的php页面需要知道单击的单选按钮的名称

我的代码正确吗？因为它不起作用，我不知道为什么

<div id="Q1"> 
<form id="Question1"  method='post'> 
<br />
<P> The sky color is..
</P><img border="0" src="images/wonder.png" width="94" height="134"/><br /><br /><br />
<input type="radio" id="option1" name="answer[1]" value="correct!"/> blue
<br />
<input type="radio" id="option1" name="answer[1]" value="false!"/> red
<br />
<input type="radio" id="option1" name="answer[1]" value="false!"/> green
<br />
<input type="radio" id="option1" name="answer[1]" value="false!"/> white
<br />
<br /> </Form>
<!-- <p id="greatp" style="display: none;"> GREAT !!<br /><br /><br /><br /><br /><br /><br /></p> -->
<img border="0" src="images/welldone3.png" width="230" height="182" id="greatp" style="display: none;"/>
<!-- <p id="sorryp" style="display: none;"> Sorry  !!<br /><br /><br /><br /><br /><br /><br /></p> -->
<img border="0" src="images/failed3.png" width="230" height="182" id="sorryp" style="display: none;"/>
<img src="images/false2.png"id="myImage1"style="display: none;"/>
<img src="images/correct2.png"id="myImage2"style="display: none;"/>
<!-- <input type= "submit" onclick="Next1()" value="Next"/> -->
<input type="image" src="images/next.png" name="image" width="80" height="30" onclick="Next1()">
</div>

 天空的颜色是。。




蓝色


红色


绿色


白色

jquery代码：

<script>
$(document).ready(function(){   
    $("#option1").click(function() {   

    var answer= $("#option1").value;

    var fff= $("#option1").name;

        $.ajax({   
            type: "POST",   
            url: "page2.php",   
            data: fff,  
            success: function(){   
                if(answer=='correct!')
                   {
                    $('#greatp').show();   
                    $('#myImage2').show();
                     $('#Question1').hide();

                    }
                 else
                    {
                      $('#sorryp').show();   
                      $('#myImage1').show();
                       $('#Question1').hide();
                    }


            }   
        });   
    return false;   
    });   
});  


</script>

$（文档）.ready（函数（）{
$（“#选项1”）。单击（函数（）{
var answer=$（“#选项1”）。值；
变量fff=$（“#选项1”）.name；
$.ajax（{
类型：“POST”，
url:“page2.php”，
数据：fff，
成功：函数（）{
如果（回答=='correct！'）
{
$（'#greatp'）.show（）；
$（'#myImage2'）.show（）；
$（“#问题1”）.hide（）；
}
其他的
{
$（'sorryp'）.show（）；
$（'#myImage1'）.show（）；
$（“#问题1”）.hide（）；
}
}   
});   
返回false；
});   
});  

首先，标签上的ID只能存在于一个标签上，它是唯一的标识符。这将是您的第一个问题，jQuery将使用

$（“#someId”）

获取它找到的第一个元素

把它改成一个类，应该会有帮助。例如，

$（“.someClass”）

或根本不使用类，执行类似于

$（“输入：收音机”）的操作。单击…

对于数据，您已经非常接近了，但我认为这不太有效，因为您需要将数据作为密钥/值对发送。您可以使用查询字符串或直接向上的json对象来实现这一点。比如：

var theData = {
 name: $(this).attr("name"),
 value: $(this).val()
};

$.ajax({
  data: theData
  ...
});

你要找的是

这个

此

设置为单击的任何单选按钮，此时您将再次硬编码到第一个ID为option1的单选按钮，这是错误的

---

也可以考虑查看<代码> $。获取< /代码>和<代码> $。POST 函数比Ajax略微简单。它们也更简洁，因此实现相同功能的代码更少。

谢谢你，布拉德，数据呢？如何为page2.php提供它所需要的东西？在这种情况下，如何给它的单选按钮的名称？我做的对吗？