Question

我是关于Ajax的再见，我的第一个脚本出了问题。我的目的是将表单的变量传递给php页面，并将结果显示在同一页面的div中。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <title>Organazier 1.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="dist/css/bootstrap.css" rel="stylesheet" />
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6 col-md-4" />
            <div class="col-xs-6 col-md-4">
                <h1>Test 1.0</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-4" />
            <div class="col-xs-6 col-md-4">
                <form class="MyForm">
                    <div class="form-group">
                        <label for="link">link</label>
                        <input type="link" class="form-control" id="link" name="link" value="Value1" />
                    </div>
                    <div class="form-group">
                        <label for="Categoria">Categoria</label>
                        <input type="Categoria" class="form-control" id="Categorie" name="Categorie" value="Value2" />
                    </div>
                    <div class="form-group">
                        <label for="Titolo">Titolo</label>
                        <input type="Titolo" class="form-control" id="Title" name="Title" value="Value3" />
                    </div>
                    <button id="newDownload" type="submit" class="btn btn-primary">Download</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-4" />
            <div class="col-xs-6 col-md-4">
                <h2>Result:</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-4" />
            <div class="col-xs-6 col-md-4" name="MyResult" id="MyResult" />
        </div>
    </div>
    <script src="https://code.jquery.com/jquery.js" />
    <script src="dist/js/bootstrap.min.js" />
    <script src="dist/js/ajaxform.js" />
</body>

</html>

ajaxform.js脚本如下：

$(function() {
//twitter bootstrap script
    $("button#newDownload").click(function(){
            $.ajax({
                type: "POST",
            url: "response_normal.php",
            data: $('form.MyForm').serialize(),
                success: function(msg){
                      $("#MyResult").html(msg)  
                },
            error: function(){
                alert("failure");
                }
                });
    });
});

你能帮我解决一下这个问题吗？

非常感谢， Pazzeo

Answer 1

在Ajax中使异步为false，它会起作用。我在我的服务器上测试它只是为了确保它结果是问题。

$(function() {

$("button#newDownload").click(function(){
        $.ajax({
            type: "POST",
        url: "response_normal.php",
        async:false,
        data: $('form.MyForm').serialize(),
            success: function(msg){
                  $("#MyResult").html(msg)  
            },
        error: function(){
            alert("failure");
            }
            });
});
});

Answer 2

你的脚本看起来是正确的，我建议：显示你的.php可能是错误的不在你的脚本中，但试试这个：

$(function() {
//twitter bootstrap script
$("#newDownload").click(function(){ // Im only change this line
        $.ajax({
            type: "POST",
            url: "response_normal.php",
            data: $('form.MyForm').serialize(),
            success: function(msg){
                  $("#MyResult").html(msg); // and this the semicolon  
            },
            error: function(){
                alert("failure");
                }
            });
});

}）;

如果你是像我这样的AJAX新手，我建议使用firebug，是firefox的扩展，你可以看到发送ajax，接收php以及返回php的内容

Answer 3

当您想使用Ajax提交表单时，必须在使用ajax using preventDefault() method之前停止表单提交默认操作

前：

$(function() {
    //twitter bootstrap script
    $("#newDownload").on('click',function(e){
            e.preventDefault();
            $.ajax({
                 type: "POST",
                 url: "response_normal.php",
                 data: $('form.MyForm').serialize(),
                 success: function(msg){
                       $("#MyResult").html(msg);  
                 },
                 error: function(){
                       alert("failure");
                 }
            });
     });
});

要测试ajax的ajax操作和响应，请使用network或Developer tool for chrome标签将net标签导入firebug with firefox

Ajax脚本将变量传递给php页面

3 个答案: