我对此有点新..我正在本地服务器上复制此演示示例
http://www.bibeault.org/jqia2/chapter4/dvds/dvds.html
在实例中结果数据得到正确加载..但不在我的机器上..我的代码和css完全相同,
更新:最近跟踪错误:
>POST http://localhost:1701/applyFilters 405 Method Not Allowed<br/>
HTTP动词POST用于访问路径&#39; / applyFilters&#39;是不允许的。
它位于.Net Server ....结果数据来自此页面http://www.bibeault.org/jqia2/chapter4/dvds/applyFilters ...我是否需要在我的服务器上完全重新创建此页面?..需要一些指导
我的代码:
<!DOCTYPE html>
<html>
<head>
<title>DVD Ambassador — Disc Locator</title>
<link rel="stylesheet" type="text/css" href="Styles/dvds.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.js"></script>
<script type="text/javascript">
var filterCount = 0;
$(function () {
$('#addFilterButton').click(function () {
var filterItem = $('<div>')
.addClass('filterItem')
.appendTo('#filterPane')
.data('suffix', '.' + (filterCount++));
$('div.template.filterChooser')
.children().clone().appendTo(filterItem)
.trigger('adjustName');
});
$('select.filterChooser').live('change', function () {
var filterType = $(':selected', this).attr('data-filter-type');
var filterItem = $(this).closest('.filterItem');
$('.qualifier', filterItem).remove();
$('div.template.' + filterType)
.children().clone().addClass('qualifier')
.appendTo(filterItem)
.trigger('adjustName');
$('option[value=""]', this).remove();
});
$('button.filterRemover').live('click', function () {
$(this).closest('div.filterItem').remove();
});
$('.filterItem [name]').live('adjustName', function () {
var suffix = $(this).closest('.filterItem').data('suffix');
if (/(\w)+\.(\d)+$/.test($(this).attr('name'))) return;
$(this).attr('name', $(this).attr('name') + suffix);
});
$('#addFilterButton').click();
$('#filtersForm').submit(function () {
$('#resultsPane').load('applyFilters', $('#filtersForm').serializeArray());
return false;
});
/* bonus exercise code -- uncomment to enable
$('input.numeric').live('keypress',function(event){
if (event.which < 48 || event.which > 57) return false;
});
*/
});
</script>
</head>
<body>
<div id="pageContent">
<h1>DVD Ambassador</h1>
<h2>Disc Locator</h2>
<form id="filtersForm" action="/fetchFilteredResults" method="post">
<fieldset id="filtersPane">
<legend>Filters</legend>
<div id="filterPane"></div>
<div class="buttonBar">
<button type="button" id="addFilterButton">Add Filter</button>
<button type="submit" id="applyFilterButton">Apply Filters</button>
</div>
</fieldset>
<div id="resultsPane"><span class="none">No results displayed</span></div>
</form>
</div>
<!-- hidden templates -->
<div id="templates">
<div class="template filterChooser">
<button type="button" class="filterRemover" title="Remove this filter">X</button>
<select name="filter" class="filterChooser" title="Select a property to filter">
<option value="" data-filter-type="" selected="selected">-- choose a filter --</option>
<option value="title" data-filter-type="stringMatch">DVD Title</option>
<option value="category" data-filter-type="stringMatch">Category</option>
<option value="binder" data-filter-type="numberRange">Binder</option>
<option value="release" data-filter-type="dateRange">Release Date</option>
<option value="viewed" data-filter-type="boolean">Viewed?</option>
</select>
</div>
<div class="template stringMatch">
<select name="stringMatchType">
<option value="*">contains</option>
<option value="^">starts with</option>
<option value="$">ends with</option>
<option value="=">is exactly</option>
</select>
<input type="text" name="term"/>
</div>
<div class="template numberRange">
<input type="text" name="numberRange1" class="numeric"/> <span>through</span>
<input type="text" name="numberRange2" class="numeric"/>
</div>
<div class="template dateRange">
<input type="text" name="dateRange1" class="dateValue"/> <span>through</span>
<input type="text" name="dateRange2" class="dateValue"/>
</div>
<div class="template boolean">
<input type="radio" name="booleanFilter" value="true" checked="checked"/> <span>Yes</span>
<input type="radio" name="booleanFilter" value="false"/> <span>No</span>
</div>
</div>
</body>
</html>
我的Css:
body {
background-image: url(backg.jpg);
}
body,td,th {
font-family: Verdana,sans-serif;
font-size: 10pt;
}
#templates {
display:none;
}
#pageContent {
width: 720px;
background-color: white;
color: #444444;
border: 2px ridge #888888;
margin: 32px auto;
padding: 8px 32px;
}
h1,h2 {
text-align: center;
}
h1,h2,h3 {
margin: 0;
}
fieldset,legend {
border: 2px ridge silver;
}
fieldset {
padding-top: 12px;
}
legend {
padding: 3px 12px;
background-color: silver;
font-weight: bold;
}
#filterPane {
margin-bottom: 16px;
}
.filterItem * {
margin-right: 4px;
margin-bottom: 4px;
}
#resultsPane {
margin-top: 14px;
}
#resultsPane span.none{
color: silver;
font-style: italic;
}
#resultsPane table {
background-color: #444444;
width: 100%;
margin-top: 12px;
}
#resultsPane th {
background-color: silver;
border: 2px outset silver;
font-size: 0.9em;
}
#resultsPane td {
background-color: white;
padding: 1px 12px;
font-size: 0.8em;
text-align: center;
}
#resultsPane td:first-child {
text-align: left;
}
input.numeric {
width: 48px;
}
input.dateValue {
width: 64px;
}
只需要为IIS7添加web.config
<?xml version="1.0"?>
<configuration>
<system.webServer>
<handlers>
<add name="htm" path="*.htm" verb="*" modules="IsapiModule" scriptProcessor="%windir%\system32\inetsrv\asp.dll" resourceType="Either" />
</handlers>
</system.webServer>
</configuration>
每个人的建议和这篇文章都有帮助:
http://zhongchenzhou.wordpress.com/2011/12/05/iis-7-7-5-allow-post-requests-to-html-files/
答案 0 :(得分:0)
假设您正在运行某种开发服务器:服务器不允许POST请求。尝试在真正的服务器上部署代码,它应该可以工作。
有人遇到类似的问题,导致问题的是VisualStudio开发服务器(http://www.mojoportal.com/Forums/Thread.aspx?pageid=5&t=6383~-1)。
目前,在本地服务器上访问applyFilters。你可以尝试:
$('#resultsPane').load('http://url.to.other.server/applyFilters', $('#filtersForm').serializeArray());
但是你有跨站点脚本。您应该使用本地版本的applyFilters(并允许POST请求)。
似乎IIS不允许对HTML文件发送POST请求:https://serverfault.com/a/349193/133535
答案 1 :(得分:0)
基本上,该演示在Apache服务器上运行,而不是在IIS下运行。 http://www.bibeault.org/jqia2/chapter4/dvds/applyFilters
上的DVD列表只是没有扩展名的文件。
如果您浏览的某个级别高于http://www.bibeault.org/jqia2/chapter4/dvds/
,则可以看到文件列表。
快速解决方法是将其重命名为本地版本的applyFilters.html
并更改load
参考。
另一种方法是允许在IIS下加载没有扩展名的文件(出于安全原因,默认情况下该文件已关闭)。