使用具有数据类型 HTML 的 Jquery AJAX 函数答案

【问题标题】：Using Jquery AJAX function with datatype HTML使用具有数据类型 HTML 的 Jquery AJAX 函数
【发布时间】：2011-12-06 01:10:43
【问题描述】：

我们有一个完整的代码，用于通过带有 JSON 数据类型的 Jquery AJAX 从 PHP 获取值。这是代码。

HTML 代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ajax submit</title>
    <link href="css/main.css" type="text/css" media="screen, projection"rel="stylesheet" />
</head>

<body>
    <div id="wrapper">
        <div id="message" style="display: none;">
        </div>
        <div id="waiting" style="display: none;">
            Please wait<br />
            <img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
        </div>
        <form action="" id="demoForm" method="post">
            <fieldset>
                <legend>Demo form</legend>
                <span style="font-size: 0.9em;">TEST by ROD</span>
                <p>
                    <label for="email">E-Mail:</label>
                    <input type="text" name="email" id="email" value="" />
                </p>
                <p>
                    <input type="submit" name="submit" id="submit" style="float: right; clear: both; margin-right: 3px;" value="Submit" />
                </p>
            </fieldset>
        </form>
    </div>
    <script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/ajaxSubmit.js"></script>
</body>
</html>

PHP 代码

sleep(3);

if (empty($_POST['email'])) {
    $return['error'] = true;
    $return['msg'] = 'You did not enter you email.';
}
else {
    $return['error'] = false;
    $return['msg'] = 'You\'ve entered: ' . $_POST['email'] . '.';
}

echo json_encode($return);

JS 代码

$(document).ready(function(){
$('#submit').click(function() {

    $('#waiting').show(500);
    $('#demoForm').hide(0);
    $('#message').hide(0);

    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        data: {
            email : $('#email').val()
        },
        success : function(data){
            $('#waiting').hide(500);
            $('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
                .text(data.msg).show(500);
            if (data.error === true)
                $('#demoForm').show(500);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            $('#waiting').hide(500);
            $('#message').removeClass().addClass('error')
                .text('There was an error.').show(500);
            $('#demoForm').show(500);
        }
    });

    return false;
});
  });

我只是想把这段代码转换成 HTML 格式，实际上上面这些代码是由互联网用户制作的。由于我在 AJAX/JS 方面的知识有限。我们无法使用 HTML 数据类型使其成为 AJAX。

整个程序都很好，根据我们的需要。目前我们只想禁用 JSON 并启用 HTML DATATYPE。

【问题讨论】：

你的问题没有任何意义。你是什么意思禁用json？你想直接从你的 php 中返回 html 而不是 json？
我没有看到任何不使用 json 的理由。为什么你不想使用 json ？
当我从 JS 脚本中删除 JSON 代码时。我们收到错误我用这一行编辑代码 $.ajax({ type : 'POST', url : 'post.php', dataType : 'html',....... .......
但我不知道使用此脚本将数据从 php 写入 html 的确切代码
我的数据是表格形式，来自 PHP。这个文件不是我的。我只是想根据我的需要修改它。当我们的数据是数组格式时，这是完美的。

标签： javascript html ajax jquery

【解决方案1】：

这是一个使用 dataType html 的版本，但它不那么明确，因为我返回一个空字符串来指示错误。

Ajax 调用：

$.ajax({
  type : 'POST',
  url : 'post.php',
  dataType : 'html',
  data: {
      email : $('#email').val()
  },
  success : function(data){
      $('#waiting').hide(500);
      $('#message').removeClass().addClass((data == '') ? 'error' : 'success')
     .html(data).show(500);
      if (data == '') {
          $('#message').html("Format your email correcly");
          $('#demoForm').show(500);
      }
  },
  error : function(XMLHttpRequest, textStatus, errorThrown) {
      $('#waiting').hide(500);
      $('#message').removeClass().addClass('error')
      .text('There was an error.').show(500);
      $('#demoForm').show(500);
  }

});

post.php

<?php
sleep(1);

function processEmail($email) {
    if (preg_match("#^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$#", $email)) {
        // your logic here (ex: add into database)
        return true;
    }
    return false;
}

if (processEmail($_POST['email'])) {
    echo "<span>Your email is <strong>{$_POST['email']}</strong></span>";
}

【讨论】：

不知道 Ajax 调用的其余代码。你上面提到的。请确认其余文件保持不变？
是的，其他都一样，你可以用我建议的替换所有post.php的代码。
那么 AJAX CALL 呢：- 在 $('#demoForm').show(500); 之后} }, ...还有更多代码？
没有变化。更新了我的答案。

【解决方案2】：

var datos = $("#id_formulario").serialize();
$.ajax({         
    url: "url.php",      
    type: "POST",                   
    dataType: "html",                 
    data: datos,                 
    success: function (prueba) { 
        alert("funciona!");
    }//FIN SUCCES

});//FIN  AJAX

【讨论】：