使用Ajax和PHP插入数据库(mysql)

编程入门行业动态更新时间:2024-10-23 10:24:53

本文介绍了使用Ajax和PHP插入数据库(mysql)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我正在尝试将表单中的数据插入到mysql数据库中.我认为问题所在是Im在HTML中使用按钮的位置，因此为什么我将所有内容都复制了过来.任何帮助，将不胜感激！

I am trying to insert data from a form into a mysql database. The place I think the issue is, is where Im using the button in the HTML hence why I copied all of it over. Any help would be appreciated!

当我按下提交"按钮时，页面闪烁，并且没有任何内容插入数据库.它应该显示一个绿色框，表示记录已在html页上提交.

When I hit the submit button, the page flashes and nothing is inserted into the DB. It should display a green box saying the record has been submitted on the html page.

因为有些人更担心我要建立一个身份验证系统，然后又出了什么问题.这不是身份验证系统，只是如何将其插入mysql数据库的示例.

Because some people are more worried Im building an authentication system then whats wrong. This is NOT an authentication system, its just an example of how to insert into a mysql db.

Index.html

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example with Ajax</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="ajax.googleapis/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="maxcdn.bootstrapcdn/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="js/insert.js"></script> <style> .custom{ margin-left:200px; } </style> </head> <body> <div class="container"> <h2 class="text-center">Insert Data Using Ajax</h2> <br/> <p id="alert" style="display:none;" class="alert alert-success text-center"><i class="glyphicon glyphicon-ok"></i><span> id="show"</span></p> <br/> <hr/> <form class="form-horizontal" role="form" method="POST"> <div class="form-group"> <label class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input class="form-control" id="name" type="text" placeholder="Enter you name"> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input class="form-control" id="email" type="text" placeholder="Your Email..."> </div> </div> <fieldset > <div class="form-group"> <label for="password" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input class="form-control" id="password" type="text" placeholder="Your Password..."> </div> </div> <div class="form-group"> <label for="gender" class="col-sm-2 control-label">Gender</label> <div class="col-sm-10"> <select id="gender" class="form-control"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </div> </body> </html>

insert.php

<?php //Create connection $connection = mysqli_connect('localhost','username','passwd','dbName'); if($_REQUEST['name']){ $name = $_REQUEST['name']; $email = $_REQUEST['email']; $password= $_REQUEST['password']; $gender = $_REQUEST['gender']; $q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')"; $query = mysqli_query($connection,$q); if($query){ echo ' Data Inserted Successfully' mysql_close($connection); } } ?>

js/insert.js

$(document).ready(function(e) { $('#submit').click(function(){ var name = $('#name').val(); var email = $('#email').val(); var password = $('#password').val(); var gender = $('#gender').val(); $ajax({ type:'POST', data:{name:name,email:email,password:password,gender:gender}, url:"insert.php", //php page URL where we post this data to save in databse success: function(result){ $('#alert').show(); $('#show').html(result); } }) }); });

推荐答案

无论如何，此特定代码可以允许插入数据库，尽管在某些地方我仍然找不到问题.

Anyway, this particular code works out to allowing insertion into database, though there are still some problem somewhere which I cannot find out.

index.html

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example with Ajax</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="ajax.googleapis/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="maxcdn.bootstrapcdn/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script> $(function () { $('button').click(function () { var name2 = $('#name').val(); var email2 = $('#email').val(); var password2 = $('#password').val(); var gender2 = $('#gender').val(); console.log('starting ajax'); $.ajax({ url: "./insert.php", type: "post", data: { name: name2, email: email2, password: password2, gender: gender2 }, success: function (data) { var dataParsed = JSON.parse(data); console.log(dataParsed); } }); }); }); </script> <style> .custom{ margin-left:200px; } </style> </head> <body> <div class="container"> <h2 class="text-center">Insert Data Using Ajax</h2> <form class="form-horizontal" > <div class="form-group"> <label class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input class="form-control" name="name" id="name" type="text" placeholder="Enter you name"> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input class="form-control" name="email" id="email" type="text" placeholder="Your Email..."> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input class="form-control" name="password" id="password" type="text" placeholder="Your Password..."> </div> </div> <div class="form-group"> <label for="gender" class="col-sm-2 control-label">Gender</label> <div class="col-sm-10"> <select id="gender" class="form-control"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </div> </body> </html>

insert.php

<?php //Create connection $connection = mysqli_connect('localhost', 'root', '', 'dbase'); if($_POST['name']){ $name = $_POST['name']; $email = $_POST['email']; $password= $_POST['password']; $gender = $_POST['gender']; $q = "INSERT INTO user (name, email, password, gender) VALUES ('$name', '$email', '$password', '$gender')"; $query = mysqli_query($connection, $q); if($query){ echo json_encode("Data Inserted Successfully"); } else { echo json_encode('problem'); } } ?>

更多推荐

使用Ajax和PHP插入数据库(mysql)

本文发布于:2023-10-27 15:41:08，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1533812.html