javascript - 使用 JavaScript 获取表单数据并使用 Ajax 发送数据

Question

编辑:发现问题。将我的表单上的 name="demo_name"和此类项目更改为 id="demo_name"修复了它。谢谢@Jill

我正在尝试使用 jquery 的 ajax 功能将联系表单数据插入 MySQL 数据库。我对此很陌生，并且它部分工作，但数据以“未定义”的形式插入数据库，而不是作为输入的值(例如姓名、电话等)。有人可以帮助我查明可能导致它的原因吗？ (部分是斯洛伐克语，但我将重要部分翻译成英语)

html页面(只是表单部分):

<div id="demo_form">
    <h2>Order a demo lesson!</h2><p>Na Vaše otázky velmi radi co najskôr zodpovieme.<br /> Prípadná <strong>ukážková hodinu je zdarma</strong> a nezáväzná.</p>
        <form name="demo" action"">
            <fieldset>
                <input type="text" class="text" name="demo_name" onblur="swip (this, '', 'Name *');" onfocus="swip (this, 'Meno *', '');" value="Meno *" />
                <input type="text" class="text" name="demo_age" onblur="swip (this, '', 'Age of child');" onfocus="swip (this, 'Vek dietata', '');" value="Vek dietata" />
                <input type="text" class="text" name="demo_email" onblur="swip (this, '', 'E-mail *');" onfocus="swip (this, 'E-mail *', '');" value="E-mail *" />
                <input type="text" class="text" name="demo_phone" onblur="swip (this, '', 'Phone');" onfocus="swip (this, 'Telefón', '');" value="Telefón" />
                <input type="text" class="text big_input" name="demo_where" onblur="swip (this, '', 'Where did you find out about us?');" onfocus="swip (this, 'Odkial ste sa o nás dozvedeli?', '');" value="Odkial ste sa o nás dozvedeli?" />
                <textarea rows="" cols="" name="demo_text" onblur="swip (this, '', 'Message...');" onfocus="swip (this, 'Text správy...', '');">Text správy...</textarea>


                <input type="submit" class="btn" value="Send" />
            </fieldset> 
        </form>
</div><!-- end: #demo_form -->

javascript/jquery:

$(function() {  
  $(".btn").click(function() {  
    // validate and process form here

    var demo_name = $("input#demo_name").val();  

    var demo_age = $("input#demo_age").val();  

    var demo_email = $("input#demo_email").val();  

    var demo_phone = $("input#demo_phone").val();  

    var demo_where = $("input#demo_where").val();  

    var demo_text = $("input#demo_text").val();  


    var dataString = 'demo_name='+ demo_name + '&demo_age=' + demo_age + '&demo_email=' + demo_email + '&demo_phone=' + demo_phone + '&demo_where=' + demo_where + '&demo_text=' + demo_text;  

$.ajax({  
  type: "POST",  
  url: "../php/demo_register.php",  
  data: dataString,  
  success: function() {

    $('#demo_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  

  }  
});  
return false;   
  });  
}); 

PHP 脚本:

<?php

include("../protected/config.php");
// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");

$demo_name=$_POST['demo_name'];
$demo_age=$_POST['demo_age'];
$demo_email=$_POST['demo_email'];
$demo_phone=$_POST['demo_phone'];
$demo_where=$_POST['demo_where'];
$demo_text=$_POST['demo_text'];

// To protect MySQL injection
$demo_name = stripslashes($demo_name);
$demo_age = stripslashes($demo_age);
$demo_email = stripslashes($demo_email);
$demo_phone = stripslashes($demo_phone);
$demo_where = stripslashes($demo_where);
$demo_text = stripslashes($demo_text);

$demo_name = mysql_real_escape_string($demo_name);
$demo_age = mysql_real_escape_string($demo_age);
$demo_email = mysql_real_escape_string($demo_email);
$demo_phone = mysql_real_escape_string($demo_phone);
$demo_where = mysql_real_escape_string($demo_where);
$demo_text = mysql_real_escape_string($demo_text);


$insert = mysql_query("INSERT INTO $tbl_name (name, age, email, phone, kde, text) VALUES ('$demo_name', '$demo_age', '$demo_email', '$demo_phone', '$demo_where', '$demo_text')");

if(!$insert){ 
die("There's a little problem: ".mysql_error()); 
} 
?>

Answer 1

您应该在此表单下有dataString:

var dataString = {demo_name: demo_name, demo_age: demo_age, and_so_on: and_so_on};