如何防止页面刷新? jQuery Ajax PHP

I have made a form where I submit new employee data to the database using jquery ajax and php. The data gets submitted and appears in the database, but how do I get it so the data will display on my page without the page refreshing?

I want the data to appear on the page without the page refreshing.

My problem: I can submit the data, but the page refreshes. If I make it so the page doesn't refresh, it won't submit the data.

    function createNewEmployee(){
require ('connection.php');
    $first = $_POST['first'];
    $last = $_POST['last'];
    $sin = $_POST['sin'];
    $pwd = $_POST['pwd'];
    $sql = "INSERT INTO employee (firstname, lastname, sin_, pass_) VALUES ('$first', '$last', '$sin', '$pwd');";
    mysqli_query($conn, $sql);
}




  <form id="addform" action="addemployee.php" method="POST">
<p>Add New Employee:<p>
    <input type="text" name="first" placeholder="First Name">
    <br>
    <input type="text" name="last" placeholder="Last Name">
    <br>
    <input type="text" name="sin" placeholder="SIN Number">
    <br>
    <input type="password" name="pwd" placeholder="Password">
    <br>
    <button type="button" id="submitbtn">Add</button>

    $(document).ready(function() {

  $("#submitbtn").click(function() {
    var first = $("#name").val();
    var last = $("#last").val();
    var sin = $("#sin").val();
    var pwd = $("pwd").val();

    $.ajax({
      type: "POST",
      data: {first:first,last:last,sin:sin,pwd:pwd},
      url: "addemployee.php",
      success: function(result) {
        $("#resultadd").html(response);
      }

    });
  });
});
duanchi8836
duanchi8836 我发布了我的代码,但我已经尽可能清楚了
一年多之前 回复
duanquyong8164
duanquyong8164 您的PHP不会将数据返回到前端,因此如果AJAX调用成功,则无需显示任何内容。
一年多之前 回复
donglie1994
donglie1994 申请返回虚假;
一年多之前 回复
dpafea04148
dpafea04148 我将按钮类型更改为button=“button”,但现在它甚至不允许我提交数据。什么都没发生
一年多之前 回复
douou6696
douou6696 因为我用它来学习ajax,所以页面不刷新
一年多之前 回复
duandanxiu6965
duandanxiu6965 为什么你使用ajax只是你可以使用PHP代码插入数据
一年多之前 回复
doumiebiao6827
doumiebiao6827 另外,在将密码插入数据库之前尝试哈希密码...
一年多之前 回复
dongqian9013
dongqian9013 而不是在按钮上添加单击处理程序添加onSubmit处理程序到窗体。$('#addForm')。submit(function(e){e.preventDefault();//其余的ajax代码});
一年多之前 回复
dongxia19772008
dongxia19772008 你有一个按钮类型='submit',当用户点击它时会导致页面刷新。
一年多之前 回复
duanlai1855
duanlai1855 在ajax中,页面不刷新,它在字段中显示数据
一年多之前 回复
dtn43447
dtn43447 是的抱歉,伙计们忘了上传我的代码,这个网站的新内容也大声笑
一年多之前 回复
dongqindu8110
dongqindu8110 使用ajax插入数据的方式,只需显示它。
一年多之前 回复
dtjo87679
dtjo87679 你确定你在使用AJAX吗?
一年多之前 回复
douqi1212
douqi1212 在提问时请更具体一点:到目前为止,您使用代码示例尝试了什么?(我因为没有代码而被投票)/你期待什么?/你得到什么错误?如需帮助,请查看“如何询问”
一年多之前 回复

3个回答



在ajax请求后添加 return false; </ strong>以防止页面刷新。</ p>

代码段</ strong> </ p>

</ p>

  
$(document).ready(function(){
$(“#submitbtn”)。click(function(){
var first = $(“#name”)。val();
var last = $(“#last”)。val();
var sin = $(“#sin”)。val();
var pwd = $(“pwd”)。val();
$ .ajax({
type:“POST”,
data: {first:first,last:last,sin:sin,pwd:pwd},
url:“addemployee.php”,
success:function(result){
$(“#resultadd”)。html(response );
}

});

返回false;});});
</ code> </ code> </ pre>

</ p>
</ div>

展开原文

原文

Add return false; after your ajax request to prevent the page from refreshing.

Code Snippet


$(document).ready(function() {
  $("#submitbtn").click(function() {
    var first = $("#name").val();
    var last = $("#last").val();
    var sin = $("#sin").val();
    var pwd = $("pwd").val();
    $.ajax({
      type: "POST",
      data: {first:first,last:last,sin:sin,pwd:pwd},
      url: "addemployee.php",
      success: function(result) {
        $("#resultadd").html(response);
      }

});

return false; }); });

duanpuluan0480
duanpuluan0480 就这样做了
一年多之前 回复
doujuan9698
doujuan9698 将$ _Request更改为$ _POST也验证您的POST对象是否包含您从客户端发送的数据,进一步读取POST的ajax文档
一年多之前 回复
down101102
down101102 在表单操作中,您也调用了此页面<form action =“addemployee.php”>您可以在表单中删除此操作
一年多之前 回复
dongwen1871
dongwen1871 刚检查过,它被调用了
一年多之前 回复
doushi1847
doushi1847 你正在调用这个页面addemployee.php,我认为你没有在该页面中调用函数createNewEmployee。
一年多之前 回复
doumeng1089
doumeng1089 它让我添加数据,但页面刷新,我不想要那样。 如果我使用上面的代码,页面不刷新,但没有数据添加到数据库
一年多之前 回复
dpfw3607
dpfw3607 然后你的插入错误。 检查您的网络以获取您的ajax请求的状态。 它将帮助您解决问题。
一年多之前 回复
doumeng2637
doumeng2637 是的,用ajax添加数据
一年多之前 回复
duanjiwu0324
duanjiwu0324 您是否使用ajax添加数据? 或使用服务器端邮政方法?
一年多之前 回复
duandong7980
duandong7980 页面现在不刷新,但不再提交数据
一年多之前 回复
dongshukou0240
dongshukou0240 检查您的控制台可能是您有错误。 返回false在每种情况下都有效。
一年多之前 回复



试试这个:</ p>

  success:function(){
location.reload ();
window.location.href =“admin.php”;
}
</ code> </ pre>
</ div>

展开原文

原文

Try this:

     success: function() {
      location.reload();
window.location.href = "admin.php";
    }

doubi2014
doubi2014 它一定是我忽略的简单解决方案
一年多之前 回复
douliao1911
douliao1911 我不知道为什么似乎没有什么工作的人
一年多之前 回复
duanbiao4035
duanbiao4035 admin.php是你的第一页
一年多之前 回复
douguadao3883
douguadao3883 我会将“admin.php”更改为包含php函数的文件吗?
一年多之前 回复
duannao8450
duannao8450 我改变了我的代码
一年多之前 回复
dongliao1860
dongliao1860 嘿,我试过,它仍然没有工作的原因
一年多之前 回复

AJAX is a technology that was mainly developed to create more dynamic websites i.e. update parts of the webpage without a complete page refresh or server roundtrip.

You can read basics here. https://www.w3schools.com/asp/asp_ajax_intro.asp

You`re using jQuery AJAX requests in JavaScript. So you can send and request data without blocking or refreshing the page. Also you are passing a success function with your AJAX request which will be executed asynchronously when the response arrives.

Your goal now is to create a PHP web service that sends a response body with your newly created employee and a correct http response code, indicating if the insertion was successful.

See the solutions stated here to get started in php web services:

php web service example

and read about CRUD and REST like here:

https://www.cloudways.com/blog/execute-crud-in-mysql-php/ https://www.codeofaninja.com/2017/02/create-simple-rest-api-in-php.html

Use the response in the success callback function to update your employee collection and frontend.

Finally as stated in the comments already. Use something else then user data for your first attempts because user data is mostly very sensitive and needs advanced techniques.

To complete this here. Your current code will not update the whole page!Your goal is to use the response in a special part of the page without updating the wohle page. This is the concept of AJAX.

Also be careful with your variable names. This can't work because response is not defined:

success: function(result) {
    $("#resultadd").html(response);
}

Just for completion I'm adding code:

$(document).ready(function() {
    $("#submitbtn").click(function() {
        var first = $("[name='first']").val();
        var last = $("[name='last']").val();

        $.ajax({
            type: "POST",
            data: {first: first, last: last},
            url: "https://main.xfiddle.com/51da1682/addEmp1.php",
            success: function(result) {
                $("#resultadd").html(result);
            }
        });
    });
});

<?php
    $dummyResponse->first = 'Foo';
    $dummyResponse->last = 'Bar';

    if (!$dummyResponse) {
        http_response_code(500);
        echo json_encode(mysqli_error());
    }

    http_response_code(200);
    echo json_encode($dummyResponse);
?>

This code is working for me, see this fiddle (valid for 2 days). https://main.xfiddle.com/51da1682/addEmpApp4.php

duanlei7101
duanlei7101 我已经做了php crud但现在我试图让它这样页面不刷新所以即时尝试使用ajax来解决这个问题
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐