使用 Ajax 和 PHP 显示文本

display text using ajax and php

本文关键字：显示 文本 PHP Ajax 使用      更新时间：2023-09-26

我只是想在ajax中做一件简单的事情，但它不起作用。我只想在单击输入按钮时显示文本

阿贾克斯.js 

jQuery(document).ready(function($) {
$('#insertForm').change(function(){
//on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
var req=$('#insertForm').val();
//requête ajax, appel du fichier function.php
$.ajax({
  type: "POST",
  url: "lib/function.php",
  data: "insertForm="+req,
  dataType : "html",
  //affichage de l'erreur en cas de problème
  error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
      },
      //function s'il n'y a pas de probleme
  success:function(data){
    $('.coucou').empty();
    $('.coucou').prepend(data.coucou)
  }
});
});
});

目录.php

<div class="coucou"></div>
<button type="button" class="btn btn-success btn-xs" name="insertForm" id="insertForm" style="margin-top: 5px;;">
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>

功能.php

if(isset($_POST['insertForm'])){
    echo "coucou";
}

jQuery(document).ready(function($) {
    $('#insertForm').click(function(){
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
        var req=$('#insertForm').val();
        //requête ajax, appel du fichier function.php
        $.ajax({
          type: "POST",
          url: "lib/function.php",
          data: "insertForm="+req,
          dataType : "html",
          //affichage de l'erreur en cas de problème
          error: function(XMLHttpRequest, textStatus, errorThrown) {
                  alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
              },
              //function s'il n'y a pas de probleme
          success:function(data){
            $('.coucou').empty();
            $('.coucou').text(data);
          }
        });
    });
});

您需要使用.click()而不是.change()而且，在成功中，您只收到一个字符串而不是一个对象，因此您只需要直接写入数据（使用 .text() ）

复制我的代码，因为我还添加了您忘记;。（这是工作，我测试过）

您使用的另一点.val() #insertForm但 html 中没有值属性。所以var req是一个空字符串

您有一个button元素而不是输入类型按钮button并且该元素确实具有文本内容，您可以更改为以下内容： 

var req=$('#insertForm').text();

但我仍然觉得你的按钮中没有任何文字，那么你到底想发布什么。

问题：

  1. button元素具有文本内容而不是值。
  2. datatype:"html"期待响应中有一些 html。
  3. 成功函数中的data.coucou是需要 JSON 数据。
相关文章：