Question

我想在jquery中提交表单而不刷新页面。

但我不知道为什么数据没有插入数据库。下面的代码有问题吗？

在此之前，我曾提到here，我希望我没有写错。

HTML

<form id="submit">
    <fieldset><legend>Enter Information</legend> <label for="fname">Client First Name:</label> 
    <input id="vName" class="text" type="text" name="vName" size="20" /> 
    <label for="lname">Client Last Name:</label> 
    <input id="vLat" class="text" type="text" name="vLat" size="20" /> 
    <input id="vLng" class="text" type="text" name="vLng" size="20" /> 
    <input id="Add" class="text" type="text" name="Add" size="20" /> 
    <button class="button positive"> <img src="../images/icons/tick.png" alt="" /> Add Client </button></fieldset>
</form>

的Javascript

$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var vName     = $('#vName').val();
var vLat      = $('#vLat').val();
var vLng      = $('#vLng').val();
var Add      = $('#Add').val();
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: "vName="+ vName +"&amp; vLat="+ vLat +"&amp; vLng="+ vLng +"&amp; Add="+ Add,
        success: function(){
            $('form#submit').hide(function(){$('div.success').fadeIn();});

        }
    });
return false;
});

dbtools.inc.php

<?php
      function create_connection()
      {
        $link = mysql_connect("localhost", "root", "52082475");
        if (!$link) {
            die('Could not connect: ' . mysql_error());
        }
        echo 'Connected successfully';
        mysql_close($link);

        mysql_query("SET NAMES utf8");
      }

      function execute_sql($database, $sql, $link)
      {
        $db_selected = mysql_select_db($database, $link)
          or die("Fail <br><br>" . mysql_error($link));

        $result = mysql_query($sql, $link);

        return $result;
      }
?>

ajax.php

<?php

    include ("dbtools.inc.php");
    $link = create_connection();
    // CLIENT INFORMATION
    $vName        = htmlspecialchars(trim($_POST['vName']));
    $vLat         = htmlspecialchars(trim($_POST['vLat']));
    $vLng         = htmlspecialchars(trim($_POST['vLng']));
    $Add          = htmlspecialchars(trim($_POST['Add']));

    $sql  = "INSERT INTO map_db (vName,vLat,vLng,add) VALUES ('$vName','$vLat','$vLng','$Add')";


        $result = execute_sql("map",$sql,$link);        
        mysql_close($link);
        header("location:add.html"); 
        exit(); 
?>

Answer 1

对于初学者来说，你的PHP代码是不安全的（查找sql注入和预处理语句）。接下来让你的PHP代码回显/打印一些东西 - 查询的结果。例如，您可能希望使用JSON或XML来打印查询结果（好|| bad）。这样，ajax可以在success函数中使用它来确定查询是否成功，从而可以适当地显示错误或成功消息。

还响应ajax请求中的错误（Reference here）。例如：

ajax.({
   url:..,
   ....
   error: function() {
   ...
   }
});

通过解释PHP的响应，您应该能够确定错误的原因是什么（错误的mysql连接，查询，语法，URL，数据等）。

古德勒克。

Answer 2

我认为您的ajax post方法的数据字段中存在语法错误...

如果您想发布整个表单，请使用...

var formData= $('form').serialize();

data: formData

或使用以下代码发送个别参数......

data: { 'vName' : vName, 'vLat' :  vLat, 'vLng' : vLng}

我不熟悉php的编码风格...但这适用于c＃方法签名...根据发布的数据字段在php中更改代码

注意：在提交方法中使用preventDefault（），以便不重定向/刷新页面

Answer 3

如果您想提交表单数据，则无需使用表单标签，而是使用此类按钮

<input type = 'image' src ='blah blah' id = 'submit'>

此外，我在此处看到您正在使用提交事件而不是使用点击事件。

Answer 4

我猜你不应该在create_connection()中关闭连接。该函数存在于打开一个新的：）

哦，似乎你也希望从同一个方法返回$link，即使你真的不需要所有代码（既不是明确的mysql_close()也不是$link。 1}}，除非你碰巧连接到同一个脚本中的两个或多个不同的数据库。）

服务器端代码似乎非常弱且不安全。如果它是一个宠物项目它没关系，但如果可以成为任何严重的，你应该注意sql注入和PHP漏洞，或使用通常为你处理这个的PHP框架

在jquery中提交没有页面刷新问题

4 个答案: