使用ajax插入查询而不重新加载整个页面

本文介绍了使用ajax插入查询而不重新加载整个页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想通过AJAX插入数据（没有重新加载页面）。我试过但它没有显示数据，也没有重新加载页面。

I want to insert data through AJAX (without reload page). I tried but it is not showing data and also reload page.

我有一个文件 first.php （其中，表格存在） ，一个AJAX代码和 firstcall.php ，其中将执行查询。

I have a file first.php (in which, form is present), a AJAX code and a firstcall.php where query will be execute.

我的 first.php （html形式）是：

My first.php (html form) is:

<form class="reservation-form mb-0" action="" method="post" autocomplete="off"> <input name="name1" id="name1" class="form-control" type="text" placeholder="Enter Name" required aria-required="true"> <input name="age" id="age" class="form-control" required type="number" placeholder="Enter Age" aria-required="true"> <input type="checkbox" id="checkbox" class="checkbox1" name="namec[]" value="<?php echo $value['id']; ?>" > <input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit"> </form>

此处应显示数据：

<div class="col-md-5"> <div class="panel panel-primary" id="showdata"> </div> </div>

AJAX是：

<script type="text/javascript"> $(document).ready(function(){ $("#submit").click(function(){ var name1 = $("#name1").val(); var age = $("#age").val(); var chkArray=[]; $('.checkbox1:checked').each( function() { chkArray.push($(this).val()); } ); var selected; selected = chkArray.join(',') ; if(selected.length > 1){ $.ajax( { url:'firstcall.php', type:'POST', data:{name1: name1,age: age,namec: chkArray}, }).done(function(data){ $("#showdata").html(data); }); } else{ alert("Please at least one of the checkbox"); } } } </script>

firstcall.php 是：

<div class="panel panel-primary" id="showdata"> <?php foreach($_POST['namec'] as $selected){ echo $selected; $_SESSION['name1']=$_POST["name1"]; $_SESSION['age']=$_POST["age"]; echo $name1=$_SESSION['name1']; echo $age=$_SESSION['age']; $query=mysql_query("insert into patient_details (p_name,p_age,g_number) values ('$name1','$age','$selected')") or die(mysql_error()); } ?>

推荐答案

$（＃submit）之后。单击（函数（事件）{添加命令

event.preventDefault();

您的页面不会是重新加载

And your page will not be reloaded