使用jqueryload方法将ajax响应数据作为内部html加载到页面元素中
load ajax response data to a page element as inner-html with j query load method
我有一个类似的表单
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
function get_sub1(value)
{
$(document).ready(
function()
{
$.post("autofunction.php?action=getsub1" ,
{ navmenu_id : value },
function(data)
{ alert(data);
$('#sub1_menu_td').html(data);
});
});
}
</script>
</head>
<body>
<form action="" name="mainform" method="post">
<table align="center" cellpadding="0" cellspacing="0" border="1">
<tr>
<th>Select NavMenu </th>
<td>
<select id="parent_menu" name="parent_menu" onchange="get_sub1(this.value)">
<option value="0">Select</option>
<?php
$nevmenu_result = $db->query ("select * from tblnavmenu");
while ($nevmenu_info = mysql_fetch_array($nevmenu_result))
{
?>
<option value="<?=$nevmenu_info['nevmenu_id']?>" > <?=$nevmenu_info['nevmenu_name']?> </option>
<?php
}
?>
</select>
</td>
<tr >
<th>Select Sub1 </th>
<td id="sub1_menu_td">
<select id="sub1_menu" name="sub1_menu" >
<option value="0">Select</option>
</select>
</td>
</tr>
<tr>
<th>Sub2 Code:</th>
<td><input type="text" name="sub2_id" id="sub2_id" /></td>
</tr>
<tr>
<th>Sub2 Name:</th>
<td><input type="text" name="sub2_name" id="sub2_name" /></td>
</tr>
<tr>
<th>Sub2 Link:</th>
<td><input type="text" name="sub2_link" id="sub2_link" /></td>
</tr>
</table>
<table class="button" align="center">
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> <td> <img src="../images/save.png" height="50" width="50" style="cursor:pointer;" alt="Save" onClick="document.mainform.submit();"> </td>
</table>
</form>
</body>
</html>
如本表格所示,选择导航菜单的基础上,Select Sub1选项加载来自更改Select NavMenu时调用的事件。定义了事件,在该事件中,我们发送navmenu的值并发布到autofunction.php
自动功能代码是
if($_REQUEST['action'] == "getsub1")
{
$navmenu_id = $_REQUEST['navmenu_id'];
$data = '<select id="sub1_menu" name"sub1_menu"> ';
$navmenu_result = $db->query("select * from sub1 where sub1_nevmenu_id = '".$navmenu_id."' ");
while($navmenu_info = mysql_fetch_array($navmenu_result))
{
$data .= '<option value="' . $navmenu_info['sub1_id']. '" > '.$navmenu_info['sub1_name'] . ' </option> ';
}
$data .= '</select>';
echo $data;
}
作为此响应的一个选择,我们将其更改为以前的。当我试图获得Sub1的值时,选择插入数据库。没有所需的值,因为
innerHTML的内容只是在浏览器中显示,而不是在页面源中,所以我也搜索以更改页面源中的内容。我发现j查询加载函数。看到了很多例子,但没有像那样做
$('#sub1_menu_td').load(data); ???????????
我需要将数据加载到#sub1_menu_td中。
如何做到这一点。尝试很多类似的东西
$('#sub1_menu_td').load("autofunction.php #sub1_menu_td");
但失败
我的目标是在pagesource中加载相同的内容,这样我就可以获取值
当您使用jquery并更改DOM(文档对象模式)的html时
然后在视图源中,这些来自(ajax、load和jquery或javascript中的任何方法)的html在视图源中都看不到
在视图源中,我们只看到页面加载上有哪些html
通过php、、net、java等服务器端语言
而不是像javascript 这样的客户端语言
请参阅GOOGLE PLAY,所有ajax提供的html请参阅控制台中的最佳结果请参阅firebug 的firefox
很抱歉,我无法阅读所有代码,但我看到您的autofunction.php需要一个后变量才能工作,所以在load()方法中,我们添加了一个变量action=getsub1来验证条件if($_REQUEST['action']=="getsub1"):
$('#sub1_menu_td').load("autofunction.php",{action: 'getsub1'});
相关文章:
- 在chrome.tabs.onCreated之后加载HTML页面
- 使用:new Image()控制加载html.src=html_URL
- AngularJS加载JSON数据,然后从中解析/加载HTML
- javascript弹出窗口没有正确加载html表单
- 什么更好?使用iframe或jQuery之类的东西在外部网站中加载HTML文件
- 使用jquery.load('pageName')方法时,未从应用程序缓存加载Html页
- 使用JS加载HTML元素
- 当select标记触发onChange事件时,从mysql数据库加载html表
- Android Webview没有'有时不会加载HTML
- 使用ajax在html中加载html文件时出现的问题
- 懒惰加载:如何使用jquery创建懒惰加载html页面
- 使用websockets加载.html和.js
- 加载 HTML 模板以通过浏览器与挖空组件一起使用
- 在jquery对话框中加载html页面
- 从Nodejs应用程序加载HTML表
- 在加载html网页时显示JavaScript表
- 当另一个显示时加载HTML而不修改他
- 一次加载HTML对象并多次使用
- 阻止/推迟加载html元素
- 如何在加载HTML时加载js文件