Javascript 在数据类型HTML中使用Jquery AJAX函数_Javascript_Html_Ajax_Jquery

Javascript 在数据类型HTML中使用Jquery AJAX函数

javascript html ajax jquery

Javascript 在数据类型HTML中使用Jquery AJAX函数,javascript,html,ajax,jquery,Javascript,Html,Ajax,Jquery,我们有一个完整的代码，用于通过Jquery AJAX和JSON数据类型从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/cs

我们有一个完整的代码，用于通过Jquery AJAX和JSON数据类型从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>

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);

$(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;
});
  });

JS代码

<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>

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);

$(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数据类型。

这里有一个使用数据类型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>";
}

你的问题毫无意义。禁用json是什么意思？你想直接从php返回html而不是json吗？我看不出有任何理由不使用json。为什么不想使用json？当我从JS脚本中删除json代码时。我用$.ajax这一行编辑代码时出错({type:'POST'，url:'POST.php'，dataType:'html'，但我不知道使用此脚本将php中的数据写入html的确切代码我的数据是来自php的表格格式。此文件不是我的。我只想根据我的需要修改它。当我们的数据是数组格式时，这是最好的。dont know Ajax调用的其余代码。您已经提到过。请确认其余文件保持不变？是的，其他所有文件都是一样的，您可以用我建议的替换post.php的所有代码。那么Ajax调用呢：-在$（'#demoForm'）.show（500）；}之后，…有更多代码？没有更改。更新了我的答案。