GoAhead_网页操作

1. GoAhead定时刷新获取后台数据

需求：定时2s刷新，请求重量数据

2. GoAhead 从网页提交数据给服务器

form表单post提交的数据格式

• action：url 地址，服务器接收表单数据的地址
• method：提交服务器的http方法，一般为post和get
• name：最好好吃name属性的唯一性
• enctype: 表单数据提交时使用的编码类型，默认使用"pplication/x-www-form-urlencoded"，如果是使用POST请求，则请求头中的content-type指定值就是该值。如果表单中有上传文件，编码类型需要使用"multipart/form-data"，类型，才能完成传递文件数据。

其中name属性规定表单的名称，name属性用于在JavaScript中引用元素，或者在表单提交之后引用表单数据。在GoAhead中，正是通过name属性的值，去获取提交的数据。
通过表单提交数据：

var value1=document.getElementById("1").value;
var value2=document.getElementById("2").value;
var url = "/action/actionTest?1="+value1+"&2="+value2;
… …
xmlhttp.open("POST",url,true);

将表单中的数据按照POST常用的提交数据方式：application/x-www-form-urlencoded对表单数据进行编码(如果不另外设置enctype属性，那么最终就会以上述方式提交数据)。
提交的数据按照：key1=val1&key2=val2的方式进行编码。可以看到上述url的组合就是在/action/actionTest?(注意这里的?)后添加要提交的参数。

之前主要是从服务器获取数据，
websGetVar( wp, “name”, NULL)，注意，第2个参数“name”在表单里面是name属性的值


update_data = &(“#test_form”).serialize( )序列化提交表单的时候，update_data的值如下所示。


name的值为”1”,”2”。
如何编写一个通用的函数去实现对每个页面提交的内容，大致构想了下。
假设每个提交的页面都有一个名称，如Basic Setting, Communication, 在GoAhead端，有一张表，然后里面记录了不同的名称对应不同的设置参数。在网页前端发送的时候，第一个参数，带上名称，0=Basic Setting&1=20190909&2=1.10,在GoAhead端提取第0个参数，然后得到对应的要设置的参数个数。
上述表格是一个比较简单的提交内容，当网页中有Input和Select时候，提交时有好几个内容。这时候如何处理。
需要获取selectlist和inputlist中的值，然后对比有没有变化。然后根据变化，设置value。
此时要通过上述方法组合key1=val1&key2=val2，其中key_x是某个select或input的name的属性值。

3. GoAhead Select 元素操作

for(var i=0; i<SelectList.length; i++ )
    {
      SelectIdArr[i] = SelectList[i].id;
      var tmp = "#";
      tmp = tmp+SelectIdArr[i];  //tmp_id for jquery  '#302'
      SelectValueArr[i]=$(tmp).find("option:first").text();
      $(tmp).find("option:first").prop("selected",'selected'); //set first option as selected option.
      setSelectedText(tmp,SelectValueArr[i]);
      
    }

function setSelectedText(tmp_id,selectvalue)
    {
      var tmp="option[value=";
      tmp = tmp+"\'"+selectvalue+"\'"+"]";
      var selectText = $(tmp_id).find(tmp).text();
      $(tmp_id).find("option:first").text(selectText);
    }

• 1.获取第一个option的值

SelectValueArr[i] = select_list[i].options[0].text;

• 2.设置第一个option为默认的selected

$(tmp).find("option:first").prop("selected",'selected'); 

4. GoAhead 提交input+select的值

input获取两次值

为什么input获取数据库值的时候，会获取两次？

• 获取url时的GoAhead API函数
  使用websGetUrl(wp),在前端上传的时候，上传内容为
  POST /action/SetVaIndexValue?12=100.000&13=1&9=2&10=0&11=1 HTTP/1.1

5. GoAhead上传文件

配置保存上传文件的位置

以Windows工程为例，需要修改goahead-windows-default-me.h中设置暂存文件的文件目录

#ifndef ME_GOAHEAD_UPLOAD_DIR  
#define ME_GOAHEAD_UPLOAD_DIR "tmp"  
#endif

但是，windows下实际修改的地方在\build\windows-x86-default\inc目录下的me.h文件。
注意：这个目录只是暂时存放文件夹的目录，真正的存放目录在程序中设定。假定windows系统下的暂存目录为D:/test
在uploadTest程序中，

upfile = sfmt("%s/tmp/%s", websGetDocuments(), up->clientFilename);  
if (rename(up->filename, upfile) < 0)  
{  
   error("Cannot rename uploaded file: %s to %s, errno %d", up->filename, upfile, errno);  
} 

websGetDocuments()获取的目录为web，这个工程中自带的目录，但是tmp目录并不存在，要不然在名字转换的时候rename()出错。因此在web目录下建立tmp目录，然后，文件最后被上传到该目录下。

Chrome浏览器输出信息如下所示:

5.1 存放大于2M的文件

在me.h中

#ifndef ME_GOAHEAD_LIMIT_POST
#define ME_GOAHEAD_LIMIT_POST 16384
#endif

ME_GOAHEAD_LIMIT_POST定义了post操作的大小， 16384=16K。因此，goahead windows工程默认上传文件最大支持16k。
在Http.c中的parseHeaders( )函数里面有关于该宏定义的判断。

if (wp->rxLen > ME_GOAHEAD_LIMIT_POST)   
{  
    websError(wp, HTTP_CODE_REQUEST_TOO_LARGE | WEBS_CLOSE, "Too big");  
    return;  
}  

5.2 实现Ajax文件上传

• ajax上传方法

1.<input id= "uploadFile" type="file">  
2.<input id="submitFile" type="button" value="send">  
3.function upload()  
4.    {  
5.        var xmlhttp;  
6.        var file_obj = document.getElementById('uploadFile').files[0];  
7.        var fd = new FormData();  
8.        fd.append('uploadFile',file_obj);  
9.        if (window.XMLHttpRequest)  
10.          {// code for IE7+, Firefox, Chrome, Opera, Safari  
11.              xmlhttp=new XMLHttpRequest();  
12.          }  
13.        else  
14.          {// code for IE6, IE5  
15.              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
16.          }  
17.        xmlhttp.onreadystatechange=function()  
18.          {  
19.              if (xmlhttp.readyState==4 && xmlhttp.status==200)  
20.              {  
21.                  
22.                alert(xmlhttp.responseText);  
23.              }  
24.          }  
25.        xmlhttp.open("POST",'/action/uploadTest',true);  
26.        xmlhttp.send(fd);  
27.      
    } 

• JQuery Ajax方法

1.$(function()  
2.{  
3.    $("#submitFile").on("click", function(){  
4.        var formData = new FormData();  
5.        var specific_file = $("#uploadFile")[0].files[0];  //jquery获取元素的方法
6.        //var specific_file = document.getElementById('uploadFile').files[0]; 也可以的
7.        //var filedate= formData.append(‘uploadFile’,specific_file);
8.        formData.append('uploadFile',specific_file);  
9.        $.ajax({  
10.            url: '/action/uploadTest',  
11.            type: 'POST',  
12.            data: formData,
13.            //data: filedate, //this is error 
14.            cache: false,  
15.            processData: false, //不做数据处理  
16.            contentType: false, //不要设置Content-Type 请求头  
17.            success:function(data){  
18.                alert(data);  
19.            },  
20.            error:function(response)  
21.            {  
22.                console.log(response);  
23.            },  
24.        });  
25.    });  
}); 

注意：起初定义了filedata变量，filedata = formData.append(‘uploadFile’,speicific_file); data:filedata。但是这样定义，起始是发送不了文件的。服务器端并没有收到文件。而应该发送的是FormData对象,这里创造了一个对象：var formData = new FormData();
fomData.append(‘uploadFile’,speicific_file);
data:formData;

8. GoAhead 下载文件