Php 如何在HTML上使用AJAX JQUERY打印此值_Php_Jquery_Ajax

Php 如何在HTML上使用AJAX JQUERY打印此值

php jquery ajax

Php 如何在HTML上使用AJAX JQUERY打印此值,php,jquery,ajax,Php,Jquery,Ajax,HTML <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but").click(function(){ $.ajax({

HTML

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("#but").click(function(){

    $.ajax({
        url: "action.php",
        type: "POST",
        dataType: "text",
        success: On_success,
        error: On_error
    });

    function On_success(response){
        alert(response);
        //$("#show").html(response);
    }

    function On_error(data){
       console.log(data);
    }      
    });
    });

  </script>
 </head>
 <body>

 <form action="action.php" method="post">
 <input type="text" name="mine">
 <input type="submit" id="but">
 </form>
 <p id="show">HI</p>
 </body>
 </html>


$（文档）.ready（函数（）{
$（“#但是”）。单击（函数（）{
$.ajax({
url:“action.php”，
类型：“POST”，
数据类型：“文本”，
成功：关于成功，
错误：On_错误
});
成功时的功能（响应）{
警报（响应）；
//$（“#show”）.html（回应）；
}
函数对_错误（数据）{
控制台日志（数据）；
}      
});
});
你好

PHP

<?php

$name = $_POST['mine'];

echo $name;

?>

HTML上有一个输入框、一个提交按钮和一个para标记当我输入一个值并单击按钮时…该值被传递到PHP文件…在该文件中，该值会被回显

现在使用AJAX获取响应..（应该是输入框中的值）

但我得到的答复是：

然后它进入PHP页面并显示输入框的值

如何在para标记中使用AJAX响应打印值

提前谢谢请帮我做几件事

如果您想留在页面上，请不要提交表单

将以后要调用的函数移动到可用的作用域，或将它们作为匿名函数使用：

success:function（）{…}

从表单发送数据

像这样：

$(function(){
  $("form").on("submit",function(e){
    e.preventDefault(); // or make the button it type="button:
    var data = $(this).serialize();
    $.ajax({
      url: "action.php", // or $(this).attr("action"),
      type: "POST",
      data: data,
      success: On_success,
      error: On_error
    });
  });
});
function On_success(response){
    $("#show").html(response);
}

function On_error(data){
   console.log(data);
}

几件事

如果您想留在页面上，请不要提交表单

将以后要调用的函数移动到可用的作用域，或将它们作为匿名函数使用：

success:function（）{…}

从表单发送数据

像这样：

$(function(){
  $("form").on("submit",function(e){
    e.preventDefault(); // or make the button it type="button:
    var data = $(this).serialize();
    $.ajax({
      url: "action.php", // or $(this).attr("action"),
      type: "POST",
      data: data,
      success: On_success,
      error: On_error
    });
  });
});
function On_success(response){
    $("#show").html(response);
}

function On_error(data){
   console.log(data);
}

问题在于你的action.php页面没有获取你的帖子数据。您需要在ajax中发送它

 $("form").submit(function(e) {      // Change the event to form submit
   e.preventDefault();
   $.ajax({
      url: $(this).attr("action"),    // Use the specified form action
      type: "POST",
      data: $(this).serialize(),     // All form data is serialized and sent to the action page
      success: On_success,
      error: On_error
  });
});

function On_success(response){
   console.log(response);       // Debug your response. 
   $("#show").html(response);
}

现在应该可以了。

问题出在action.php页面，它没有获取您的帖子数据。您需要在ajax中发送它

 $("form").submit(function(e) {      // Change the event to form submit
   e.preventDefault();
   $.ajax({
      url: $(this).attr("action"),    // Use the specified form action
      type: "POST",
      data: $(this).serialize(),     // All form data is serialized and sent to the action page
      success: On_success,
      error: On_error
  });
});

function On_success(response){
   console.log(response);       // Debug your response. 
   $("#show").html(response);
}

现在应该可以了。

在javascript中使用innerHtml或在JQuery中使用html如果你想使用ajax发布，为什么要使用输入类型submit和form action？我对ajax的体验非常少……你能帮我吗@Poria…..我将输入该值，然后单击该值应显示在与PHP页面的响应相同的页面上的para标记首先更改输入类型submit to type按钮，查看页面加载是否停止，表单是否使用javascript中的ajaxuse innerHtml或JQuery中的html提交为什么使用输入类型submit和表单操作如果你想用ajax发帖？我对ajax的经验很少…你能帮我吗@Poria…..我将输入该值，然后单击该值应显示在与PHP页面的响应相同的页面上的para tag首先更改输入类型submit to type按钮，查看页面加载是否停止，表单是否正在提交，Ajax是否仍然获得相同的响应@mplungjan您是否发送了矿山（我更新了脚本以获得数据序列化帮助，请@mplungjan仍然得到相同的响应@mplungjan您发送了地雷吗（我更新了脚本，使其具有数据序列化帮助，请@mplungjanIts仍然在PHP页面上显示值…我希望该值打印在HTML页面上，它本身应该可以正常工作。您是否尝试过与答案完全相同？它仍然在PHP页面上显示值…我希望该值打印在HTML页面上很好。你试过和答案完全一样吗？