Question

我正在阅读一本关于PHP和jQuery的书，我遇到了Ajax的问题，因为它不会发布它的更改并显示它们。

    <head>
    <meta charset="utf-8" />
    <title>Testing jQuery</title>
</head>
<body>
    <p>Hello World!</p>
    <p class="foo">Another paragraph, but this one ahs a class.</p>
    <p><span>This is a span in a paragraph</span></p>
    <p id="bar">Paragraph with an id.
        <span class="foo">And this is a sentence in a span</span>
    </p>
    <script src="jquery.validate.min.js"></script>
    <script src="jquery/ajax.js"></script>
    <script src="jquery/jquery-1.8.3.min.js"></script>

    <form action="#" method="post">
        <fieldset>
            <legend>Sign Up Form</legend>
            <label for="name">Name</label><br/>
            <input name="name" id="name" type="text" /><br/>
            <label for="password">Password</label><br/>
            <input name="password" id="password"
                   type="password" /><br/>
            <label>
                <input id="mycomp" type="radio" name="loc" />
                I'm on my computer.
            </label><br/>
            <label>
                <input id="shared" type="radio" name="loc" checked="checked" />
                I'm on my shared computer.
            </label>
            <input type="submit" value="Log In" /><br/>
            <label>
                <input id="signedin" type="checkbox" name="notify"
                       disabled="true"/>
                Keep me signed in on this computer.
            </label><br/>
        </fieldset>
    </form>

</body>
</html>

以下是测试网站的代码。它非常简单，但这个ajax查询不会修改它：

    $.ajax({
  "type":"POST",
  "url":"ajax.php",
  "data":"var1=val1&var2=val2",
  "success":function(data){
    $("#bar")
    .css("background","yellow")
    .html(data);
  }
});

我通过firebug控制台运行它，它似乎运行正常，但实际上什么也没发生。

Answer 1

好吧，我试着解释一切。首先，当您想要使用ajax发送表单时，您不能使用标记的提交和属性。您将函数分配给按钮或元素以提交表单，此函数执行调用ajax，例如。

使用你的html，这个Jquery代码：

$('input[type=submit]').click(submitForm);
function submitForm(){
$.ajax({
   "type":"POST",
   "url":"ajax.php",
   "data":"var1=val1&var2=val2",
   "success":function(data){
       $("#bar")
       .css("background","yellow")
       .html(data);
   }
 });
}

如果你做POST，你必须在数组中发送变量，或者像这样：

"data": {
   var1:val1,
   var2:val2
 }

你在ajax.php中收到$ _POST [var1]和$ _POST [var2]。

所以你的javascript / Jquery代码就是这样的：

$('input[type=submit]').click(submitForm);
function submitForm(){
$.ajax({
  "type":"POST",
  "url":"ajax.php",
  "data": {
       var1:val1,
       var2:val2
     },
  "success":function(data){
    $("#bar")
    .css("background","yellow")
    .html(data);
  }
});
}

如果您有任何疑问，请告诉我。我希望这对你有用。

Ajax没有做出改变

1 个答案: