使用WebView可以让Android端的开发工作大量减少,原因是在服务端可以为其做一定的工作,下面这个小Demo就实现了从Android客户端与服务端的交互。我这里客户端使用的工具是Eclipse,服务端使用MyEclipse。
实现效果图:
客户端:
点击登录按钮后,页面跳转,而在服务端Console中看到如下(只看最后一行即可):
可以看到服务端收到了客户端发过来的用户名:yao。
源代码:
客户端:
activity_main:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerHorizontal="true" /> </RelativeLayout>
MainActivity:
package com.webviewdemo1; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.content.DialogInterface.OnClickListener; import android.os.Bundle; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends Activity { private WebView webView; /** * 服务端地址 */ private String url = "http://172.16.17.36:8080/mywebviewserver/myhtml.html"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView) findViewById(R.id.webView); WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true); webView.setWebChromeClient(new WebChromeClient(){ @Override public boolean onJsAlert(WebView view, String url, String message, final JsResult result) { AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setTitle("警告"); builder.setMessage(message); builder.setPositiveButton("ok", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { result.confirm(); } }); builder.create().show(); return true; } }); webView.loadUrl(url); } }
服务端:
myhtml.html:
<!DOCTYPE html> <html> <head> <title>myhtml.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--客户端访问服务端的URL地址: http://172.16.17.36:8080/mywebviewserver/myhtml.html --> <script type="text/javascript"> function dosubmit() { var th = document.form1; if (th.username.value == "") { alert("请输入用户名称!!"); return; } th.action = "/mywebviewserver/servlet/Login"; } </script> </head> <body> <form name="form1" action="" method="post"> <table border="1" bordercolor="#CCCCCC" cellpadding="1" width="300" cellspacing="1"> <tr> <td align="right">用户名</td> <td><input type="text" name="username" value=""></td> </tr> <tr> <td align="right">密码</td> <td><input type="password" name="pswd" value=""></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" name="submit" value="登陆" onclick="dosubmit()"> <input type="reset" name="reset" value="重置"> </td> </tr> </table> </form> </body> </html>
Login.java:
package com.cn.login; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Login extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;chareset=utf-8"); PrintWriter out = response.getWriter(); String name = request.getParameter("username"); System.out.println("---客户端输入的用户名为:->>>" + name); out.flush(); out.close(); } }
下面给出客户端和服务端的源代码,感兴趣的可以试着运行一下: