将Jquery AJAX函数与数据类型HTML结合使用

编程入门 行业动态 更新时间:2024-10-13 00:33:15
本文介绍了将Jquery AJAX函数与数据类型HTML结合使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我们有完整的代码,可通过带有JSON数据类型的Jquery AJAX从PHP获取值.这是代码.

We have a complete code for getting the values from PHP through Jquery AJAX with JSON datatype. Here are the codes.

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.

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.

根据我们的需要,整个程序很好.目前,我们只想禁用JSON和启用HTML数据类型.

The whole programme is good and according to our need. At the moment we just want to DISABLE the JSON and ENABLE HTML DATATYPE.

推荐答案

这里是使用dataType html的版本,但这不那么明确,因为我要返回一个空字符串来表示错误.

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.

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>"; }

更多推荐

将Jquery AJAX函数与数据类型HTML结合使用

本文发布于:2023-10-28 04:48:31,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1535570.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:数据类型   函数   Jquery   AJAX   HTML

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!