如何使用jquery/ajax将值插入数据库？

的index.php如何使用jquery/ajax将值插入数据库？

<script> 
     $(document).ready(function(){ 
      $(".submit").click(function(){ 
var formname = $(this).parents("form").attr("id"); 
      cname = $("#"+formname+" #cname").val(); 
      name = $("#"+formname+" #name").val(); 
      fname = $("#"+formname+" #fname").val(); 
      email = $("#"+formname+" #email").val(); 
      phone = $("#"+formname+" #phone").val(); 
      x = $("#"+formname+" #x").val(); 
      xii = $("#"+formname+" #xii").val(); 
      qualify = $("#"+formname+" #qualify").val(); 
      $.ajax({ 
       type:"POST", 
       data:{"cname":cname,"name":name,"fname":fname,"email":email,"phone":phone,"x":x,"xii":xii,"qualify":qualify}, 
       url:"enquiry.php", 
       success:function(data){ 
       $("#"+formname+" #msg").html(data); 
       } 
      }); 
      }); 
     }); 
    </script> 
<a href='#' id='enquire' data-toggle="modal" data-target="#myModal<?php echo $id; ?>">Enquire</a></span> 
<div class="modal fade" id="myModal<?php echo $id; ?>" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     </div> 
     <div class="modal-body"> 
     <div id="msg"></div> 
     <form method="post" name="formid<?php echo $id; ?>" name="formname<?php echo $id; ?>"> 
      <input type="text" name="name" id="name" placeholder="Enter Your Name"> 
      <input type="text" name="fname" id="fname" placeholder="Enter Your Father's Name"><br/> 
      <input type="text" name="email" id="email" placeholder="Enter Your Email"> 
      <input type="text" name="phone" id="phone" placeholder="Enter Your Phone"><br/> 
      <input type="text" name="x" id="x" placeholder="Enter Your X Percent"> 
      <input type="text" name="xii" id="xii" placeholder="Enter Your XII Percent"><br/> 
      <input type="text" name="qualify" id="qualify" placeholder="Enter Your Qualifying Exam(Optional)"><br/><br/> 
      <input type="submit" class="submit" name="" id="submit" value="submit" class="btn btn-primary"> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div>

enquiry.php

<?php 
    $cname = $_POST['cname']; 
    $name = $_POST['name']; 
    $fname = $_POST['fname']; 
    $email = $_POST['email']; 
    $phone = $_POST['phone']; 
    $x = $_POST['x']; 
    $xii = $_POST['xii']; 
    $qualify = $_POST['qualify']; 
    $sql = "insert into student_enquiry(college_name,name,father,email,phone,x_percent,xii_percent,qualify)values('$cname','$name','$fname','$email','$phone','$x','$xii','$qualify')"; 
    $result = mysqli_query($link,$sql); 
    if($result == true) 
    { 
     echo "<p style='color:green;text-align:center;'>your data has been submitted successfully</p>"; 
    } 
    else 
    { 
     echo "<p style='color:red;text-align:center;'>Error!</p>" 
    } 
?>

在这段代码中，我创造它里面具有形式模式，我想插入表格值到使用jQuery/AJAX数据库。当我点击提交按钮时，它会隐藏模式，并且不会显示任何成功消息或任何错误消息。那么，我该怎么做？请帮忙。

谢谢

来源

2017-06-20 omkara

更改按钮，从提交到按钮式，所以不会刷新 –

什么，当我点击提交按钮然后模型隐藏。 – omkara

您的输入是否已保存在数据库中？ – verhie

检查下面的jQuery代码和HTML代码

$(document).ready(function() { 
    $(".submit").click(function() { 
     var formname = "formid"+$(this).attr("data-id"); 
     cname = $("#" + formname + " #cname").val(); 
     name = $("#" + formname + " #name").val(); 
     fname = $("#" + formname + " #fname").val(); 
     email = $("#" + formname + " #email").val(); 
     phone = $("#" + formname + " #phone").val(); 
     x = $("#" + formname + " #x").val(); 
     xii = $("#" + formname + " #xii").val(); 
     qualify = $("#" + formname + " #qualify").val(); 
     $.ajax({ 
      type: "POST", 
      data: {"cname": cname, "name": name, "fname": fname, "email": email, "phone": phone, "x": x, "xii": xii, "qualify": qualify}, 
      url: "enquiry.php", 
      success: function (data) { 
       $("#" + formname + " #msg").html(data); 
      } 
     }); 
    }); 
});

HTML代码

<a href='#' id='enquire' data-toggle="modal" data-target="#myModal<?php echo $id; ?>">Enquire</a></span> 
<div class="modal fade" id="myModal<?php echo $id; ?>" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     </div> 
     <div class="modal-body"> 
     <div id="msg"></div> 
     <form method="post" name="formid<?php echo $id; ?>" name="formid<?php echo $id; ?>"> 
      <input type="text" name="name" id="name" placeholder="Enter Your Name"> 
      <input type="text" name="fname" id="fname" placeholder="Enter Your Father's Name"><br/> 
      <input type="text" name="email" id="email" placeholder="Enter Your Email"> 
      <input type="text" name="phone" id="phone" placeholder="Enter Your Phone"><br/> 
      <input type="text" name="x" id="x" placeholder="Enter Your X Percent"> 
      <input type="text" name="xii" id="xii" placeholder="Enter Your XII Percent"><br/> 
      <input type="text" name="qualify" id="qualify" placeholder="Enter Your Qualifying Exam(Optional)"><br/><br/> 
      <input type="button" class="submit" name="submit" data-id="<?php echo $id; ?>" id="submit" value="submit" class="btn btn-primary"> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 

</div>

来源

2017-06-20 09:58:37

举一个ID的表单元素。

<form method="post" id="registration">

提交表单如下：

var formdata = jQuery('#registration').serialize(); 
jQuery.ajax({ 
     type: 'POST', 
     url: 'enquiry.php', 
     dataType: 'json', 
     data: formdata, 
     success: function(result) { 
      $("#msg").html(data); 
     } 

    });

来源

2017-06-20 06:47:44

尝试例如低于用于使用AJAX保存数据，

JS/CDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("#submit").click(function(){ 
     cname = $("#cname").val(); 
     name = $("#name").val(); 
     fname = $("#fname").val(); 
     email = $("#email").val(); 
     phone = $("#phone").val(); 
     x = $("#x").val(); 
     xii = $("#xii").val(); 
     qualify = $("#qualify").val(); 
     $.ajax({ 
      type:"POST", 
      data:{"cname":cname,"name":name,"fname":fname,"email":email,"phone":phone,"x":x,"xii":xii,"qualify":qualify}, 
      url:"enquiry.php", 
      success:function(data){ 
      $("#msg").html(data); 
      } 
     }); 
     }); 
    }); 
</script>

HTML

<a href='#' id='enquire' data-toggle="modal" data-target="#myModal">Enquire</a></span> 
<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     </div> 
     <div class="modal-body"> 
     <div id="msg"></div> 
     <form method="post"> 
      <input type="text" name="name" id="name" placeholder="Enter Your Name"> 
      <input type="text" name="fname" id="fname" placeholder="Enter Your Father's Name"><br/> 
      <input type="text" name="email" id="email" placeholder="Enter Your Email"> 
      <input type="text" name="phone" id="phone" placeholder="Enter Your Phone"><br/> 
      <input type="text" name="x" id="x" placeholder="Enter Your X Percent"> 
      <input type="text" name="xii" id="xii" placeholder="Enter Your XII Percent"><br/> 
      <input type="text" name="qualify" id="qualify" placeholder="Enter Your Qualifying Exam(Optional)"><br/><br/> 
      <input type="button" name="" id="submit" value="submit" class="btn btn-primary"> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div>

Ajax文件。在这个文件中，您可以获取发布的数据并保存它们。

<?php 
// Your mysql query. 
$insert = mysql_query("insert into `table_name` set `field1`=''"); 
if($insert){ 
    echo "Inserted successfully !"; 
} 
else{ 
    echo "Not Inserted !"; 
} 
?>

来源

2017-06-20 06:54:46

你在做什么新的@jaydeep mor – omkara

不是新的。使用带有显示成功消息的Ajax保存数据是一种模式。 –

如何使用jquery/ajax将值插入数据库？

回答

相关问题