连接到Restful WCF Web服务和Jquery Mobile/HTML_Html_Jquery_Rest_Jquery Mobile

连接到Restful WCF Web服务和Jquery Mobile/HTML

html jquery rest jquery-mobile

连接到Restful WCF Web服务和Jquery Mobile/HTML,html,jquery,rest,jquery-mobile,Html,Jquery,Rest,Jquery Mobile,我已经创建了一个小的web应用程序，我正在尝试连接到我的web服务。由于某种原因，我收到了错误“200” 功能很简单： 1）用户在Home.html页面上输入一个值（产品编号）。 2）调用该服务并根据输入的值执行搜索。 3）如果找到结果，请在SearchResult.html页面上输出产品编号 Home.html <!DOCTYPE html> <!--[if IEMobile 7 ]> <html class="no-js iem7"> <![e

我已经创建了一个小的web应用程序，我正在尝试连接到我的web服务。由于某种原因，我收到了错误“200”

功能很简单：
1）用户在Home.html页面上输入一个值（产品编号）。
2）调用该服务并根据输入的值执行搜索。
3）如果找到结果，请在SearchResult.html页面上输出产品编号

Home.html

<!DOCTYPE html>
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="cleartype" content="on">

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
    <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#222222">

    <script src="js/vendor/modernizr-2.6.1.min.js"></script>    
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js">    </script>

</head>
<body>

    <header class="Navigation">            
        <div class="headerImage"><img src="images/logo-small.png" alt="Home"/</div>        
    </header>

    <div id="product" class="Banner">
        Product Search
    </div>

       <br />
        <div class="nine-tenths">
            Please enter a product number.
        </div>

            <input id="productNum" class="productNum" type="text" placeholder="Enter Product Number"/>           

        <br />                                 

        <button type="button" id="btnSearch" onclick="btnSearch()">Search</button>   

        <script src="js/main.js"></script>
</body>

<table style="width:100%;" class="searchResultFound">
        <tr>
            <td style="width: 10%;">
                <img src="images/resultFound.png" align="left">
            </td>
            <td>
                <input id="productNum" type="text" class="no-outline " disabled="disabled" value="">
                <label>Was found</label>
            </td>
        </tr>
    </table>

    <table style="width:100%;" class="searchResultNotFound">
        <tr>
            <td style="width: 10%;">
                <img src="images/resultNotFound.png" align="left">
            </td>
            <td>
                <input id="productNum" type="text" class="no-outline " disabled="disabled" value="">
                <label>Was not found</label>
            </td>
        </tr>
    </table>


产品搜索


请输入产品编号。


搜寻

main.JS

function btnSearch() {
//  document.location.href = 'SearchResult.html';

var productNum= $("#productNum").val(); 
alert(productNum);

var ajaxSearch = "http://localhost:8008/Product/ProductList/GetProduct.php?prod_num?" + productNum;
alert(ajaxSearch);

$.ajax(ajaxSearch,

{
    beforeSend: function (xhr) {
    // $.mobile.showPageLoadingMsg();
},

complete: function () {
// $.mobile.hidePageLoadingMsg();
},
    contentType: 'application/json',
    dataType: 'jsonp',
    jsonp: 'callback',
    type: 'GET',
    error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(xhr.responseText);
    //alert(thrownError);
},
success: function (data) {
    var result = data.GetEmployeeListingResult;

    $.each(result, function (index, output) {
        $('#EmployeeList').append('<li> <a href=SearchResult.html?productNum=' + output.prod + '> </a>   .....</li>');
    });

    //$('#EmployeeList').listview('refresh');
}
});

函数btnSearch（）{
//document.location.href='SearchResult.html'；
var productNum=$（“#productNum”）.val（）；
警报（productNum）；
var ajaxSearch=”http://localhost:8008/Product/ProductList/GetProduct.php?prod_num?“+productNum；
警报（ajaxSearch）；
$.ajax（ajaxSearch，
{
发送前：函数（xhr）{
//$.mobile.showPageLoadingMsg（）；
},
完成：函数（）{
//$.mobile.hidePageLoadingMsg（）；
},
contentType:'应用程序/json'，
数据类型：“jsonp”，
jsonp:“回调”，
键入：“GET”，
错误：函数（xhr、ajaxOptions、thrownError）{
警报（xhr.状态）；
警报（xhr.responseText）；
//警报（thrownError）；
},
成功：功能（数据）{
var结果=data.GetEmployeeListingResult；
$.each（结果、函数（索引、输出）{
$（“#员工列表”）。追加（“..”）；
});
//$（'#EmployeeList'）.listview（'refresh'）；
}
});

}

SearchResult.html

<!DOCTYPE html>
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="cleartype" content="on">

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
    <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#222222">

    <script src="js/vendor/modernizr-2.6.1.min.js"></script>    
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js">    </script>

</head>
<body>

    <header class="Navigation">            
        <div class="headerImage"><img src="images/logo-small.png" alt="Home"/</div>        
    </header>

    <div id="product" class="Banner">
        Product Search
    </div>

       <br />
        <div class="nine-tenths">
            Please enter a product number.
        </div>

            <input id="productNum" class="productNum" type="text" placeholder="Enter Product Number"/>           

        <br />                                 

        <button type="button" id="btnSearch" onclick="btnSearch()">Search</button>   

        <script src="js/main.js"></script>
</body>

<table style="width:100%;" class="searchResultFound">
        <tr>
            <td style="width: 10%;">
                <img src="images/resultFound.png" align="left">
            </td>
            <td>
                <input id="productNum" type="text" class="no-outline " disabled="disabled" value="">
                <label>Was found</label>
            </td>
        </tr>
    </table>

    <table style="width:100%;" class="searchResultNotFound">
        <tr>
            <td style="width: 10%;">
                <img src="images/resultNotFound.png" align="left">
            </td>
            <td>
                <input id="productNum" type="text" class="no-outline " disabled="disabled" value="">
                <label>Was not found</label>
            </td>
        </tr>
    </table>


被发现
找不到

我曾尝试使用此网站作为示例（为什么您可能会看到员工的参考）：

谢谢

main.js中的URL声明错误。'产品编号'

使用“'GetProduct.php？prod_num='+productNum”

而不是“'GetProduct.php？prod_num？”+productNum”

尝试使用以下方法：

var ajaxSearch = "http://localhost:8008/Product/ProductList/GetProduct.php?prod_num=" + productNum;

您还可以添加服务器端PHP代码吗？我想让你了解jsonp是如何工作的。谢谢。在main.js文件中，我是否正确加载了结果页？这取决于您得到的结果的结构。您可以通过在代码中添加断点来添加和查看结果。。另外，如果建议的答案对你有帮助，请把它加上去。这取决于你得到的结果的结构。您可以通过在代码中添加“调试器”来添加和查看结果。。i、 e.var结果=data.GetEmployeeListingResult；调试器；$。每个（结果、函数（索引、输出）{$（'#EmployeeList'）.append（'

'）；}）；