Web应用程序异步发送和检索数据,AJAX允许网站将内容加载到屏幕上而无需刷新页面。 jQuery提供了几种实现AJAX函数的方法,从而使使用AJAX更加容易。在本章中,无涯教程将学习如何将GraphQL与jQuery集成。
为了将GraphQL与JQuery集成在一起,先检查GraphiQL请求标头并了解请求参数。
启动 hello-world 应用程序,在GraphiQL窗口中输入graphql查询{greeting}。右键单击并检查或按Chrome上的(ctrl + shift + I)转到网络标签,如下所示-
通过简单的 hello-world 示例,可以了解到 http方法是 POST 。
点击查看代码后,您将在chrome的请求部分中看到以下内容。
{"query":"{\n greeting\n}","variables":null,"operationName":null}
还请注意应从客户端应用程序调用的请求URL http://localhost:9000/graphql 。了解如何使用逐步过程将GraphQL与JQuery集成。
将学习使用以下步骤来设置服务器-
创建一个名为 jquery-server-app 的文件夹。从终端将目录更改为jquery-server-app。请按照"环境设置"一章中介绍的步骤3至5进行操作。
在项目文件夹 jquery-server-app 中添加schema.graphql文件,并添加以下代码-
type Query { greeting: String sayHello(name:String!):String }
该文件定义了两个查询 greeting 和 sayHello 。 ``sayHello''查询接受一个字符串参数并返回另一个字符串。 sayHello()函数的参数不为null。
链接:https://www.learnfk.comhttps://www.learnfk.com/graphql/graphql-jquery-integration.html
来源:LearnFk无涯教程网
在项目文件夹中创建一个文件resolvers.js并添加以下代码-
const Query = { greeting: () => 'Hello GraphQL From LearnFk !!' , sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!` } module.exports={Query}
在这里, greeting 和 sayHello 是两个解析器。在sayHello解析器中,可以通过args访问传递给name参数的值。要访问模块外部的解析器函数,必须使用 module.exports 导出查询对象。
创建一个server.js文件。请参阅"环境设置"一章中的步骤8。在终端中执行命令 npm start 。服务器将启动并在9000端口上运行。在这里使用GraphiQL作为客户端来测试应用程序。
打开浏览器并输入URL http://localhost:9000/graphiql 。在编辑器中键入以下查询-
{ greeting, sayHello(name:"Learnfk") }
来自服务器的响应如下所示-
{ "data": { "greeting": "Hello GraphQL From LearnFk !!", "sayHello": "Hi Learnfk GraphQL server says Hello to you!!" } }
由于已经设置了服务器,因此现在将学习如何设置客户端。
首先,将在项目文件夹之外创建一个名为 jquery-client-app 的文件夹。
将在jquery中创建一个客户端应用程序并调用这两种方法。以下是 index.html 文件的代码。单击 Greet 和 SayHello 按钮时, index.html 页将请求发送到服务器。无涯教程将使用$.ajax()函数发出异步请求。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnSayhello").click(function() { const name=$("#txtName").val(); console.log(name); $("#SayhelloDiv").html('loading....'); $.ajax({url: "http://localhost:9000/graphql", contentType: "application/json",type:'POST', data: JSON.stringify({ query:`{ sayHello(name:"${name}")}` }), success: function(result) { console.log(JSON.stringify(result)) $("#SayhelloDiv").html("<h1>"+result.data.sayHello +"</h1>"); } }); }); $("#btnGreet").click(function() { $("#greetingDiv").html('loading....'); //https://kannan-first-graphql-app.herokuapp.com/graphql $.ajax({url: "http://localhost:9000/graphql", contentType: "application/json", type:'POST', data: JSON.stringify({ query:`{greeting}` }), success: function(result) { $("#greetingDiv").html("<h1>"+result.data.greeting+"</h1>"); } }); }); }); </script> </head> <body> <h1>Jquery Client </h1> <hr/> <section> <button id="btnGreet">Greet</button> <br/> <br/> <div id="greetingDiv"> </div> </section> <br/> <br/> <br/> <hr/> <section> Enter a name:<input id="txtName" type="text" value="kannan"/> <button id="btnSayhello">SayHello</button> <div id="SayhelloDiv"> </div> </section> </body> </html>
在浏览器中打开此文件,然后单击按钮以查看响应。输出将如下所示-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)