Question

我一直在搜索和研究很多类似的问题，但我找不到解决问题的答案。

我想通过使用$ .ajax函数将数据插入MySQL数据库。

我使用一个表单（form.php），一个插入数据的脚本（insert.php）和我的脚本update.js来调用ajax来插入数据（它应该是insert.js ...我知道但是没关系......）

这是我的form.php：

<?php //form.php
//script con un formulario
//conexion a la BD:
include_once 'connect.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php
    header('Content-Type: text/html; charset=UTF-8');
?>
<script type="" src="jquery-1.11.0.min.js"></script>
<script type="" src="jquery-1.10.2.js"></script>
<script type="" src="update.js"></script>
</head>
<body>
    <header>
        <h3>Ejemplo de forma para actualizar datos con ajax</h3>
    </header>
    <nav>
        <h3>This is the nav area</h3>
    </nav>
    <section>
        <form action="insert.php" name="myform" id="myform">
            <fieldset>
            <legend> Insert new data:</legend>
            <label for="name"> Name: <input type="text" id="name" name="name"> </label> <br>
            <label for="age"> Age: <input type="number" id="age" name="age"> </label> <br>
            <label for="company"> Company: <input type="text" id="company" name="company"></label> <br>
            <label for="submit"><input type="submit" value="save" id="submitButton" name="submitButton"></label>
            </fieldset>
        </form>
        <div id="msg"></div>
    </section>
</body>
</html>

这是insert.php：

    <?php //insert.php
//script to insert data (sent via ajax) into database
//conexion a la BD:
include_once 'connect.php';
if(isset($_POST) && !empty($_POST)){
    //process data
    $name=$_POST['name'];
    $age=$_POST['age'];
    $company=$_POST['company'];
    if(mysql_query("INSERT INTO people (name,age,company) VALUES('$name',$age,'$company')")){
        echo '<p style="color: green;">Data inserted successfully!</p>';
    } else{
        echo '<p style="color: red;">There has been an error: <b>'.mysql_error().'</b></p>';
        die(mysql_error());
    }
} else{
    echo '<p style="color: red;">No data received :(</p>';
}
?>

最后这是我的.js代码 update.js：

$(document).ready(function(){
   $('#submitButton').on('click', function(){
       //retrieving the data submitted:
       var name = $('#name').val();
       var age = $('#age').val();
       var company = $('#company').val();
       alert('The following data is about to be sent: 1) Name: '+ name + '. 2)Age: '+ age + '. 3)Company: '+ company);
       $.ajax({
           url: 'insert.php',
           type: 'POST',
           data: {
               name: name,
               age : age,
           company : company
           },
           'beforeSend':function(){
               alert('Ya los voy a enviar, eh?');
           },
           'success': function(result){
               $('#myform').hide();
               $('#msg').html(result);
               alert('Success!');
           },
           'error': function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
           }
       });//end of ajax
   });
});

代码在哪里错了??? 我无法让它发挥作用:(

请帮忙！

Answer 1

您从表单中发送变量的值，作为发布数据中变量的名称。包含引号应该可以解决您的问题。

       data: {
           'name' : name,
           'age' : age,
           'company' : company
       },

Answer 2

将此行添加到表单中：

<form action="insert.php" name="myform" id="myform" method="POST">

您忘记了表单用于传输数据的方法。您期望在PHP中使用POST，如果是GET则是默认值。

此外，如果您使用<form>，则无需使用jQuery（据我所见）。 form.php：

<!DOCTYPE html>
<html lang="es">
<head>
<?php
    header('Content-Type: text/html; charset=UTF-8');
?>
<script type="" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="" src="update.js"></script>
</head>

<body>
<header>
    <h3>Ejemplo de forma para actualizar datos con ajax</h3>
</header>
<nav>
    <h3>This is the nav area</h3>
</nav>
<section>
    <form action="insert.php" name="myform" id="myform" method="POST">
        <fieldset>
        <legend> Insert new data:</legend>
        <label for="name"> Name: <input type="text" id="name" name="name"> </label> <br>
        <label for="age"> Age: <input type="number" id="age" name="age"> </label> <br>
        <label for="company"> Company: <input type="text" id="company" name="company"></label> <br>
        <label for="submit"><input type="submit" value="save" id="submitButton" name="submitButton"></label>
        </fieldset>
    </form>
    <div id="msg"></div>
</section>
</body>
</html>

JS：

$(document).ready(function() {
$('#submitButton').on('click', function() {
    //retrieving the data submitted:
    var name1 = $('#name').val();
    var age1 = $('#age').val();
    var company1 = $('#company').val();
    alert('The following data is about to be sent: 1) Name: ' + name1 + '. 2)Age: ' + age1 + '. 3)Company: ' + company1);
    $.ajax({
        url: 'insert.php',
        type: 'POST',
        data: {
            name: name1,
            age: age1,
            company: company1
        },
        'beforeSend': function() {
            alert('Ya los voy a enviar, eh?');
        },
        'success': function(result) {
            $('#myform').hide();
            $('#msg').html(result);
            alert('Success!');
        },
        'error': function(xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    }); //end of ajax
});
});

我的PHP没有得到$ .ajax函数的帖子

2 个答案: