Fatal编程技术网
  • php/
  • Php 为什么'；我的Ajax功能不工作吗？

Php 为什么'；我的Ajax功能不工作吗？

php javascript jquery ajax

Php 为什么'；我的Ajax功能不工作吗？,php,javascript,jquery,ajax,Php,Javascript,Jquery,Ajax,我试图使用一个表单将两个javascript变量提交到php脚本，并通过ajax函数将输出返回到同一页面上的新Div。它不起作用 <link href="style/background.css" rel="stylesheet" type="text/css"> <script src="scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> fbPageOp

我试图使用一个表单将两个javascript变量提交到php脚本，并通过ajax函数将输出返回到同一页面上的新Div。它不起作用

<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>
这是我的密码

<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>
javascript/html

<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>


<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>


fbPageOptions={
阴影类型：“光晕”，
调整持续时间：5.5，
图像衰减：4.5，
overlayFadeDuration:0，
navType:'两者'，
宽度：580，
身高：405
};
添加新用户




名字：

姓氏：

var firstname=“”；
var lastname=“”；
$（'#form'）。提交（函数（）{
firstname=$（“输入#firstname”）.val（）；
lastname=$（“输入#lastname”）.val（）；
警报（名字+姓氏）；
$.ajax({
类型：“POST”，
url：“我的url在这里”，
数据：{firstname:firstname，lastname:lastname}，
成功：功能（数据）{
$（“#已提交”）.html（数据）；
警惕（“成功”）；
}
});
});




<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>
下面是php代码

<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>

<?php


$firstname = $_POST["firstname"];
echo "First name added is $firstname";
echo "<br>";

$lastname = $_POST["lastname"];
echo "Last name added is $lastname";

?>
当我提交表单时，会触发警报框，但不会更新div。我在另一页上使用的代码几乎相同，而且它工作正常（有什么想法吗

<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>
非常感谢。

表单提交，重新加载页面，您需要防止默认提交事件：

<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>

$('#form').on('submit', function (e) {
    e.preventDefault();

    var firstname = $("#firstname").val(),
        lastname = $("#lastname").val();

    $.ajax({
        type: "POST",
        url: "my url is in here",
        data: {
             firstname: firstname,
             lastname: lastname
        }
    }).done(function (data) {
        $("#submitted").html(data);
        alert("success");
    });
});
在submit函数中返回false，以防止导致问题的submit的默认行为

<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>

$('#form').submit(function() {
    firstname = $("input#firstname").val();
    lastname = $("input#lastname").val();
    alert(firstname + lastname);
    $.ajax({
    ......
   }); 
   return false;
});
您应该使用$.param或.serialize等方法向您发送数据

<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>


<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>

到底什么不起作用？将值提交到php脚本的ajax调用，或将结果写入html输出的javascript部分？
return false
是submit函数内部需要的，仅用于OP info，
return false；
必须在$.ajax（{}）之外函数我现在遇到另一个错误：-/XMLHttpRequest无法加载adduser.php。访问控制允许源代码不允许使用源代码。（11:52:18:124 | error，javascript）在adduser.htmlScrub，我在我的php文件中添加了头（'Access-Control-Allow-Origin:'），现在它可以工作了。谢谢！您可以做：var data=$（'#form'）。serialize（）在ajax请求中发送数据更干净。关于访问控制允许来源，这是一个非常流行的跨域请求问题，因此我认为您会很快找到解决方案。再次，不确定您的目的是什么对不起：-/ 
<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>