Ajax调用Autocomplete:
$(function() {
$("#businessCity").autocomplete(
{
source : function(c, b) {
$.ajax({
url : ctxPath + "/getCityNeighbourhood",
dataType : "json",
data : {
searchString : c.term,
itemType : "city"
},
success : function(d) {
b($.map(d.cityNeighbourhoodList, function(e) {
return {
label : e,
value : e
}
}))
}
})
},
minLength : 1
});
});
我的行动类：
public class AutoCompleteAjax {
XYZ xyz = new XYZ();
private List<String> cityNeighbourhoodList=new ArrayList<>();
public String getCityNeighbourhood(){
HttpServletRequest request = ServletActionContext.getRequest();
String searchString = request.getParameter("searchString");
String itemType = request.getParameter("itemType");
cityNeighbourhoodList = xyz.getListOfCityStateNeighborhood(itemType, searchString);
return "success";
}
//getters & setters...
}
struts.xml条目的配置：
<action name="getCityNeighbourhood"
class="com.abc.xyz.ui.action.AutoCompleteAjax"
method="getCityNeighbourhood">
<result type="json" />
</action>
我在struts.xml中使用以下包：
<package name="default" namespace="/" extends="struts-default, json-default">
奇怪的行为是它在本地运行良好，但当我在生产服务器中尝试时-在我的文本字段中键入时，Action类被调用，但没有得到任何自动完成建议。当我尝试在FireFox调试器中调试时，我可以看到响应类型是html，而不是Json。
任何帮助都将不胜感激。
>编辑：当我尝试使用FireFox调试器时，我得到的是下面的整个代码，响应类型是html-
ReferenceError:removeClass未定义
$(input).focus( function(){removeClass('placeholder');});主页操作（第86行）获取
http://xyz-qa.in/autoCompleteAction?boxName=B1&name_startsWith=a200 OK 347ms jquery-1.7.1.js（第8102行）参数标题响应HTMLCookies
<!doctype html>
<html> <head>
<meta charset="UTF-8"> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <title>xyz - Home</title>
<link rel="xyz icon" type="image/ico" href="/images/SMNS-favicon.ico" /> <link rel="stylesheet" href="/css/boilerplate.css" type="text/css" media="all" /> <link rel="stylesheet" href="/css/jquery-ui.css" type="text/css" media="all" /> <link rel="stylesheet" href="/css/StreamlinedMNSstyle131024.min.css" type="text/css" media="all" /> <link rel="stylesheet" type="text/css" media="all" href="css/jquery.toolbars.css" />
<style> .placeholder { color: #aaa; } </style>
<script type="text/javascript" src="/scripts/jquery-1.7.1.js"> </script> <script> function getPlaceHolders(){ $("[placeholder]").focus(function() {
var input = $(this);
if (input.val() == input.attr("placeholder")) {
input.val("");
input.removeClass("placeholder");
}
}).blur(function() {
var input = $(this);
if (input.val() == "" || input.val() == input.attr("placeholder")) {
input.addClass("placeholder");
input.val(input.attr("placeholder"));
}
}).blur();
$("[placeholder]").parents("form").submit(function() {
$(this).find("[placeholder]").each(function() {
var input = $(this);
if (input.val() == input.attr("placeholder")) {
input.val("");
}
});
}); } function removePlaceHolderValues(formName){
var elemArray = document.getElementById(formName).elements;
for (var i = 0; i < elemArray.length;i++)
{
var element = elemArray[i];
if((element.placeholder == element.value)){
element.value = "";
}
} } function removePlaceHolderProperty(formName){ var elemArray = document.getElementById(formName).elements;
for (var i = 0; i < elemArray.length;i++){
var input = elemArray[i];
if(input.placeholder!='')
$(input).focus( function(){removeClass('placeholder');});
} } </script> <center> <noscript>Please enable JavaScript to use this website</noscript> </center>
<script type="text/javascript">var
_gaq=_gaq||[];_gaq.push(["_setAccount","UA-38795955-3"]);_gaq.push(["_trackPageview"]);(function(){var b=document.createElement("script");b.type="text/javascript";b.async=true;b.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(b,a)})();</script> </head> <body>
<div class="gridContainer clearfix"> <!--Header--> <div id="header">
<!--Auto Complete Code-->
<form id="headerPage" name="headerPage" action="/homePageAction.action" method="post" onSubmit="removePlaceHolderValues('headerPage'); removePlaceHolderProperty('headerPage');"> <input type="hidden" name="pageNumber" value="1" id="pageNumber"/>
<!--End Auto Complete Code--> <div class="signin-text">
<div class="signin-text">
<a href="javascript:viewProfile();" >
<img
src='/mns_ads_in/pictureads/8141_profile_31_9_2013_0_2_15.jpg'
width="20" height="21">
Hi shailesh Kumar !</a>
<span>l</span> <a href="signOutAction">Sign Out </a>
<div id="menucontainer" style="position:relative; margin-left:7px; float:right;"> <span id="editmenu"><img src="/images/gear-icon.jpg" alt="Gear"/></span>
<div id="user-options" class="toolbar-icons" style="display: none;">
<a href="displayUpdateProfile?location=Bangalore" onclick="redirect('displayUpdateProfile?location=Bangalore&pageNumber=1')">Update Profile</a>
<a href="javascript:displayInviteFriends();" onclick="javascript:displayInviteFriends();" >Invite Friends</a>
</div>
</div> </div>
</div> <div style="float: right;"> <input type="text" name="location" maxlength="50" value="Bangalore" id="location" class="location-input" onblur="return getTheLocation(this.value)" onkeypress="displayResults(event);" onkeyup="return getTheLocation(this.value)" placeholder="Location Metro"/> <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span> </div> <div class="logo-home"> <a href="javascript:displayHomePage();"><img src='/images/SMNS-logo.jpg' alt="xyz"> </a> </div> <p class="clear"></p> <!--Search--> <div class="tittle-container"> <div class="tittle"> <img width="104" height="28" alt="" src="images/SMNS-search-tittle.jpg"> </div>
</div> <div style="margin-top: 10px;"> <input type="text" name="search" value="" id="search" class="searchfor item" onkeyup="displayResultOnhitEnter(event);" placeholder="Business Name or Category" onInput="$(this).removeClass('placeholder');"/> <input type="text" name="city" value="" id="city" class="where item" onkeyup="displayResultOnhitEnter(event);" placeholder="City, State or Neighborhood" onInput="$(this).removeClass('placeholder');"/> <img style="float: right;display:block;bgcolor:red;" src="/images/SMNS-new-go-button.png" width="49" height="32" class="btninimg" onclick="displaySearchResults('');" /> <!--Search End--> </div>
</form>
<br/><br/>
<!-- Move the SCRIPT stuff to the Separate js file --> <script> var ctxPath = ''; </script> <script type="text/javascript" src="/scripts/home.header.display.result131004.min.js"> </script> <script type="text/javascript" src="/scripts/jquery.toolbar.min.js"></script> <script type="text/javascript" src="/scripts/gear.menu.js"></script> </div>
<!--Content--> <div class="content-area"> <div>
<form id="iconsForm" name="iconsForm" action="/homePageAction.action" method="post" onSubmit="removePlaceHolderValues('iconsForm');"> <!--Explore--> <input type="hidden" name="pageNumber" value="1" id="pageNumber"/> <input type="hidden" name="location" value="Bangalore" id="location"/> <input type="hidden" name="category" value="" id="category"/> <div class="tittle-container">
<div class="tittle"><img src="/images/SMNS-explore-tittle.jpg" alt="" width="104" height="28" /></div> </div> <div class="in-around">In and around <span id="locationLabel"
></span></div> <div id="explore-ico-container">
<div class="explore-icon"><a onclick="callAction('','Restaurant');" style="cursor: pointer;"><img src="/images/SMNS-restaurant-icon.jpg" alt="" width="103" height="103" /></a></div>
<div class="explore-icon"><a onclick="callAction('','Shopping');" style="cursor: pointer;"><img src="/images/SMNS-shopping-icon.jpg" alt="" width="103" height="103" /></a></div>
<div class="explore-icon"><a onclick="callAction('','Entertainment');" style="cursor: pointer;"><img src="/images/SMNS-entertainment-icon.jpg" alt="" width="103" height="103" /></a></div>
<div class="explore-icon"><a onclick="callAction('','Spas and Salons');" style="cursor: pointer;"><img src="/images/SMNS-spa-icon.jpg" alt="" width="103" height="103" /></a></div> </div> <!--Explore End--> </form>
<script type="text/javascript" src="/scripts/display.home.page130911.min.js"></script> <script> document.getElementsByTagName('title')[0].innerHTML = 'xyz - Home'; </script> </div> </div> </div> <!--Footer--> <div id="footer">
<div class="footer-text">Copyright 2013 xyz</div> </div> <input type="hidden" id="refreshed" value="no"> <!--Footer End-->
<script type="text/javascript" src="/scripts/jquery-ui.js"></script> <script type="text/javascript" src="/scripts/respond.min.js"></script>
</body> </html>
url : ctxPath + "/getCityNeighbourhood",
如果项目在本地而不是在服务器上运行，则此设置会产生问题。您必须验证ctxPath变量的值。
将其更改为：
url : "${pageContext.request.conetxtPath}/getCityNeighbourhood",
也可以在没有上下文的情况下尝试Path:
url : "/getCityNeighbourhood",