使用JQuery发送数据到数据库/ AJAX [英] Sending data to database using Jquery/ajax

问题描述

我一直在试图把我的形式，但我一直被卡住。我把它用jQuery禁用工作。但是，如果我把jQuery的它不发送任何东西。 （如果没有我的元件检查错误）

I've been trying to put up my form but I keep getting stuck. I got it to work with jquery disabled. But if I turn Jquery on it does not send anything. (Without errors in my element inspection)

我已经上了一段时间了，我尝试了不同的解决方案（从不同的主题对堆栈溢出几个在这里），但我不断收到同一个点。它可能是在服务器端，但我一直在想，如果这将是情况下，它不应该在所有的工作。有没有人可能有一个想法？

I've been on it for a while now and I tried different solutions (a few from different topics here on Stack overflow) but I keep getting to the same point. It might be something on the server side but I keep thinking that if that would be the case it shouldn't work at all. Does anyone might have an idea?

链接： http://www.volunteeringnews.com/osf.php

在codeS：

客户端：osf.php

<?php include("osb.php");?>
<link href="css/styles.css" rel="stylesheet">
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript">

$(function(){

$('#submit').click(function(){
 $('#container').append('<img src = "img/ajax/ajax-loader.gif" alt="Currently loading" id = "loading" />');

    var name=$("#name").val();
    var continent=$("#continent").val();
    var country=$("#country").val();
    var website=$("#website").val();
    var email=$("#email").val();
    var nameorg=$("#nameorg").val();
    var category=$("#category").val();
    var price=$("#price").val();
    var currency=$("#currency").val();
    var description=$("#description").val();
    var wanted=$("#wanted").val();
    var expectation=$("#expectation").val();
    var extra=$("#extra").val();


     $.ajax({

        url: 'osb.php',
        type: 'POST',
        data: 'name =' + name + '&continent=' + continent + '&country=' + country + '&website=' + website + '&email=' + email + '&nameorg=' + nameorg + '&category=' + category + '&price=' + price + '&currency=' + currency + '&description=' + description + '&wanted=' + wanted + '&expectation=' + expectation + '&extra=' + extra,


        success: function(result){
             $('#response').remove();
             $('#container').append('<p id = "response">' + result + '</p>');
             $('#loading').fadeOut(500, function(){
                 $(this).remove();

             });

        }

     });         

    return false;

});


});

</script>



<!--we have our html form here where user information will be entered-->
<form action='osb.php' method='post' border='0'>
<div id = "container">  <br>
    <label>Name:            </label>    <input type='text' id="name" name='name' /><br>  <br>
    <label>Continent:       </label>    <select id="continent" name="continent"> <option>Africa</option><option>America</option><option>Asia</option> <option>Australia</option><option>Europe</option></select><br><br>
    <label>Country:         </label>    <input type='text' id="country" name='country' /><br><br>
    <label>Website:         </label>    <input type='text' id="website" name='website' /><br><br>
    <label>E-mail:          </label>    <input type='text' id="email" name='email' /><br><br><br>
    <label>Organisation:    </label>    <input type='text' id="nameorg" name='nameorg' /><br><br>
    <label>Category:        </label>    <input type='text' id="category" name='category' /><br><br>
    <label>Price per week:  </label>    <input type='text' id="price" name='price' /><br><br>
    <label>Currency:        </label>    <select id ="currency"  name="currency" >  <option> EUR </option> <option> DOL </option> <option> GBP </option></select><br><br>
    <label>Description:     </label>    <textarea id="description" rows="5" cols="40"  placeholder="Describe what kind of volunteer is welcome" name='description'/></textarea><br><br>
    <label>Wanted:          </label>    <textarea id="wanted" rows="5" cols="40"  placeholder="Describe what kind of volunteer is welcome" name='wanted'/></textarea><br><br>
    <label>Expectation:     </label>    <textarea id="expectation" rows="5" cols="40"  placeholder="Describe what a volunteer can expect"  name='expectation'/></textarea><br><br>
    <label>Extra:           </label>    <textarea id="extra" rows="5" cols="40"  placeholder="Describe what a volunteer can expect"  name='extra'/></textarea><br><br>

    <input type='hidden' name='action' value='create' />
    <input type='submit' value='Submit' id="submit" value = "send feedBack"/>
    <input type="reset" value="Reset" class="reset-org">

    <a href='index.php'>Back to index</a> 

    

服务器端：osb.php

<?php
//set connection variables
$host = "";
$username = "";
$password = "";
$db_name = ""; //database name

//connect to mysql server
$mysqli = new mysqli($host, $username, $password, $db_name);



//check if any connection error was encountered
if(mysqli_connect_errno()) {
echo "Error: Could not connect to database.";
exit;
}

$action = isset($_POST['action']) ? $_POST['action'] : "";



if($action=='create'){ //the the user submitted the form

//include database connection
include 'mysqli.php';

//our insert query query
//$mysqli->real_escape_string() function helps us prevent attacks such as SQL injection
$query  = "insert into organisation 
            set
                name = '".$mysqli->real_escape_string($_POST['name'])."', 
                continent = '".$mysqli->real_escape_string($_POST['continent'])."',
                country = '".$mysqli->real_escape_string($_POST['country'])."',
                website = '".$mysqli->real_escape_string($_POST['website'])."',
                email = '".$mysqli->real_escape_string($_POST['email'])."',
                nameorg = '".$mysqli->real_escape_string($_POST['nameorg'])."',
                category = '".$mysqli->real_escape_string($_POST['category'])."',
                price = '".$mysqli->real_escape_string($_POST['price'])."',
                currency = '".$mysqli->real_escape_string($_POST['currency'])."',
                description = '".$mysqli->real_escape_string($_POST['description'])."',
                wanted = '".$mysqli->real_escape_string($_POST['wanted'])."',
                expectation = '".$mysqli->real_escape_string($_POST['expectation'])."',
                extra  = '".$mysqli->real_escape_string($_POST['extra'])."'";


//execute the query
if( $mysqli ->query($query) ) {
    //if saving success
    echo "User was created.";
}else{
    //if unable to create new record
    echo "Database Error: Unable to create record.";
}
//close database connection
$mysqli->close();
}



?>

非常感谢你！

Thank you very much!!

推荐答案

试试这个

下面是经过编辑的HTML

Here is the edited html

    <form action='osb.php' method='post' border='0' id="form1">
    <div id = "container">  <br>
        <label>Name:            </label>    <input type='text' id="name" name='name' /><br>  <br>
        <label>Continent:       </label>    <select id="continent" name="continent"> <option>Africa</option><option>America</option><option>Asia</option> <option>Australia</option><option>Europe</option></select><br><br>
        <label>Country:         </label>    <input type='text' id="country" name='country' /><br><br>
        <label>Website:         </label>    <input type='text' id="website" name='website' /><br><br>
        <label>E-mail:          </label>    <input type='text' id="email" name='email' /><br><br><br>
        <label>Organisation:    </label>    <input type='text' id="nameorg" name='nameorg' /><br><br>
        <label>Category:        </label>    <input type='text' id="category" name='category' /><br><br>
        <label>Price per week:  </label>    <input type='text' id="price" name='price' /><br><br>
        <label>Currency:        </label>    <select id ="currency"  name="currency" >  <option> EUR </option> <option> DOL </option> <option> GBP </option></select><br><br>
        <label>Description:     </label>    <textarea id="description" rows="5" cols="40"  placeholder="Describe what kind of volunteer is welcome" name='description'/></textarea><br><br>
        <label>Wanted:          </label>    <textarea id="wanted" rows="5" cols="40"  placeholder="Describe what kind of volunteer is welcome" name='wanted'/></textarea><br><br>
        <label>Expectation:     </label>    <textarea id="expectation" rows="5" cols="40"  placeholder="Describe what a volunteer can expect"  name='expectation'/></textarea><br><br>
        <label>Extra:           </label>    <textarea id="extra" rows="5" cols="40"  placeholder="Describe what a volunteer can expect"  name='extra'/></textarea><br><br>

        <input type='hidden' name='action' value='create' />
        <input type='button' value='Submit' id="submit" />
        <input type="reset" value="Reset" class="reset-org">

        <a href='index.php'>Back to index</a> 
</form>

使用 .serialize（），它会自动把所有的表单数据

use .serialize(), it will automatically take all the form data

    $(function(){

    $('#submit').click(function(){
     $('#container').append('<img src = "img/ajax/ajax-loader.gif" alt="Currently loading" id = "loading" />');
    $.ajax({

            url: 'osb.php',
            type: 'POST',
            data: $('#form1').serialize(),
            success: function(result){
                 $('#response').remove();
                 $('#container').append('<p id = "response">' + result + '</p>');
                 $('#loading').fadeOut(500);

               }

         });         

    });
 });

和你的PHP页面添加此

and in your php page add this

<?php
$data=$_POST['serialize'];
$name=$data['name'];  //access data like this

?>

这篇关于使用JQuery发送数据到数据库/ AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！