Question

我想使用jquery ajax将表单中的数据插入到我的数据库中。

这是我到目前为止所做的，但它没有添加任何东西，只是通过url发送值，而不是phpmyadmin。

知道我做错了什么，还是需要添加？

谢谢！

的index.php

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">

<meta charset="utf-8">
<title>Form</title>
</head>
<script type="text/javascript" src="js/validate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //insert record
        $('#insert').click(function(){
            var voornaam = $('#voornaam').val();
            var achternaam = $('#achternaam').val();
            var telefoonnummer = $('#telefoonnummer').val();
            var email = $('#email').val();

            //syntax - $.post('filename', {data}, function(response){});
            $.post('action.php',{action: "submit", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
                $('#result').html(res);
            });        
        });
    });
</script>

<body>
<div id="wrap">
<table>
<td>
    <form name="form">
        <tr>
        <p class="names">Voornaam:</p> <p><input type="text" name="voornaam" id="voornaam"></p>
        </tr>
        <tr>
         <p class="names">Achternaam:</p> <p><input type="text" name="achternaam" id="achternaam"></p>
        </tr>
        <tr>
         <p class="names">Telefoonnummer:</p> <p><input type="text" name="telefoonnummer" id="telefoonnummer"></p>
        </tr>
        <tr>
         <p class="names">Emailadres:</p> <p><input type="text" name="email" id="email"></p>
        </tr>
        <tr>
        <input class="knop" type="submit" name="submit" value="Opsturen" id="submit">
        </tr>
    </form>
</td>
</table>

action.php的

<?php
    //connect to db
include ('connection.php');

    //if insert key is pressed then do insertion
    if($_POST['action'] == 'submit'){

        $voornaam  = mysql_real_escape_string($_POST['voornaam']);
        $achternaam = mysql_real_escape_string($_POST['achternaam']);
        $email  = mysql_real_escape_string($_POST['email']);
        $telefoonnummer = mysql_real_escape_string($_POST['telefoonnummer']);

        $sql   = "insert into form (voornaam, achternaam, email, telefoonnummer) values ('$voornaam', '$achternaam', '$email', '$telefoonnummer')";
        $query = mysql_query($sql);
        if($query){
            echo "Toegevoegd!";
        }else {
            echo "Er is iets fout gegaan.";
        }
    }
?>

表格结构：

-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
--
-- Machine: localhost
-- Genereertijd: 10 jan 2014 om 13:50
-- Serverversie: 5.6.12-log
-- PHP-versie: 5.4.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Databank: `opdracht`
--

-- --------------------------------------------------------

--
-- Tabelstructuur voor tabel `form`
--

CREATE TABLE IF NOT EXISTS `form` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `voornaam` varchar(255) NOT NULL,
  `achternaam` varchar(255) NOT NULL,
  `telefoonnummer` int(20) NOT NULL,
  `email` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Answer 1

试试这段代码：

$.post('action.php',{'action': "submit", 'voornaam':voornaam, 'achternaam':achternaam, 'telefoonnummer':telefoonnummer, 'email':email},function(res){
    $('#result').html(res);
});

因为您需要在变量名称中添加配额标记。

使用以下内容更改此查询：

$sql = "insert into 
           `form` (`id`,`voornaam`, `achternaam`, `email`, `telefoonnummer`) 
            values ('','".$voornaam."', '".$achternaam."', '".$email."', '".$telefoonnummer."')";

Answer 2

用此替换提交按钮代码，

  <input class="knop" type="button" name="submit" value="Opsturen" id="insert">

Jquery Ajax插入数据

2 个答案: