Javascript 使用数据类型为 HTML 的 Jquery AJAX 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7739105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Jquery AJAX function with datatype HTML
提问by PPS
We have a complete code for getting the values from PHP through Jquery AJAX with JSON datatype. Here are the codes.
我们有一个完整的代码，用于通过 Jquery AJAX 使用 JSON 数据类型从 PHP 获取值。这是代码。
HTML CODE
代码
<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 CODE
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 CODE
代码
$(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;
});
});
I just want to Move this code to HTML format, actually above these codes are made by internet user. due to my limited knowledge in AJAX/JS . we are unable to make it AJAX with HTML datatype.
我只是想将此代码移动到 HTML 格式，实际上上面这些代码是由互联网用户制作的。由于我对 AJAX/JS 的了解有限。我们无法使用 HTML 数据类型使其成为 AJAX。
The whole programme is good and according to our need. At the moment we just want to DISABLE the JSON and ENABLE HTML DATATYPE.
整个程序很好，符合我们的需要。目前我们只想禁用 JSON 和启用 HTML DATATYPE。
回答by Benjamin Crouzier
Here is a version that uses dataType html, but this is far less explicit, because i am returning an empty string to indicate an error.
这是一个使用 dataType html 的版本，但这远不那么明确，因为我返回一个空字符串以指示错误。
Ajax call:
阿贾克斯调用：
$.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
<?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>";
}
回答by frank
var datos = $("#id_formulario").serialize();
$.ajax({
url: "url.php",
type: "POST",
dataType: "html",
data: datos,
success: function (prueba) {
alert("funciona!");
}//FIN SUCCES
});//FIN AJAX
