0
点赞
收藏
分享

微信扫一扫

【汇智学堂】-AJAX+JAVA之四（修改数据前端界面）

_刘彦辉 2023-04-21 阅读 111
AJAX+JAVAxmljqueryhtmlJavaScript前端开发


前端界面inoutUpdate.html：

<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>日常收支修改--汇智学堂后台管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">

	<link rel="stylesheet" href="../../layui2/css/layui.css" media="all" />

	<script type="text/javascript">

        var showval;

        function load()
        {
			//获得传递过来的id
            var thisURL = document.URL;
            var getval =thisURL.split('?')[1];
            showval= getval.split("=")[1];

            //alert(showval);
           queryinvest(showval);
        }

        function updateinvest01() {
            alert(showval);
            updateinvest(showval);
        }

	</script>

</head>
<body class="childrenBody" onload="load()">

<form>
	<div class="layui-form-item">
		<label class="layui-form-label">收支标题</label>
		<div class="layui-input-block">
			<input type="text" class="layui-input newsName" id="projectname" lay-verify="required" placeholder="请输入收支标题">
		</div>
	</div>
	<div class="layui-form-item">

		<div class="layui-inline">
			<label class="layui-form-label">收支人</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input newsAuthor" id="investor" lay-verify="required" placeholder="请输入收支人">
			</div>
		</div>

		<div class="layui-inline">
			<label class="layui-form-label">金额</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input newsAuthor" id="money" lay-verify="required" placeholder="请输入金额">
			</div>
		</div>

		<div class="layui-inline">
			<label class="layui-form-label">时间</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input newsTime" id="investdate" lay-verify="required|date" onclick="layui.laydate({elem:this})">
			</div>
		</div>

		<div class="layui-inline">
			<label class="layui-form-label">分类</label>
			<div class="layui-input-inline">
				<select id="classification" class="newsLook" style="width: 100%;height: 38px;" lay-filter="browseLook" >
					<option value="个人借款">个人借款</option>
					<option value="个人还款">个人还款</option>
					<option value="项目欠款">项目欠款</option>
					<option value="项目回款">项目回款</option>
					<option value="应付个人">应付个人</option>
                    <option value="应付个人">已付个人</option>
				</select>
			</div>
		</div>


	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">内容描述</label>
		<div class="layui-input-block">
			<textarea placeholder="请输入收支内容描述" id="useforwhat" class="layui-textarea"></textarea>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit="" lay-filter="addNews" onclick="updateinvest01()">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary" onclick="returnlist()">返回</button>
		</div>
	</div>
</form>

	<script type="text/javascript" src="../../layui2/layui.js"></script>
	<script type="text/javascript" src="inoutAdd2.js"></script>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

</body>
</html>

JS文件inoutAdd2.js:

layui.config({
    base : "js2/"
}).use(['form','layer','jquery','layedit','laydate'],function(){
    var form = layui.form(),
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        laypage = layui.laypage,
        layedit = layui.layedit,
        laydate = layui.laydate,
        $ = layui.jquery;
 })

function addinout() {

        var projectname = $("#projectname").val();
        var investor=$("#investor").val();
        var money=$("#money").val();
        var investdate=$("#investdate").val();
        var classification=$("#classification").val();
        var useforwhat=$("#useforwhat").val();

       var data={
           "projectname":projectname,
           "investor":investor,
           "money":money,
           "investdate":investdate,
           "useforwhat":useforwhat,
           "classification":classification
        }

        $.ajax({
            type : "post",
            url : "/servletinout?do=add",
            data : data,
            cache : true,
            async : true,
            success: function (msg ){
                alert(msg);
                if(msg=='1'){
                    alert('成功了');
                }

                else{
                    alert('失败了');
                }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       alert('2222222');

            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {

                alert(typeof(errorThrown));
            }
        });
}


//--------------------修改-----------------------//

function updateinvest(showval) {

    var id=showval;
    var projectname = $("#projectname").val();
    var investor=$("#investor").val();
    var money=$("#money").val();
    var investdate=$("#investdate").val();
    var classification=$("#classification").val();
    var useforwhat=$("#useforwhat").val();

    var data={
        "projectname":projectname,
        "investor":investor,
        "money":money,
        "investdate":investdate,
        "useforwhat":useforwhat,
        "classification":classification,
        "id":id
    }

    $.ajax({
        type : "post",
        url : "/servletinout?do=edit",
        data : data,
        cache : true,
        async : true,
        success: function (msg ){
             if(Xmlhttp.readyState==4){
                 if(Xmlhttp.status==200){
                     alert(Xmlhttp.responseText);
                 }
             }
            if(msg=='1'){
                alert('修改成功了');
            }

            else{
                alert('修改失败了');
            }
           // alert('2222222');
            /*if(data.code == 200){
                alert("插入成功了");
            }else{
                alert(data.message);
            }*/
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {

            alert(typeof(errorThrown));
        }

    });
}

//------------------AJAX提交查询----------------------//
var XmlHttp= createXMLHttpRequest();
var para;
var url;

var projectnameT=document.getElementById("projectname");
var investorT=document.getElementById("investor");
var moneyT=document.getElementById("money");
var investdate=document.getElementById("investdate");
var useforwhat=document.getElementById("useforwhat");
var classification=document.getElementById("classification");

//查询

function queryinvest(ids) {

    /* var bkid=$("bkid").value;
     var name=$("name").value;*/
    //var bkid=document.getElementById("projectname").value;

    var id=ids;
   // projectnameT.innerHTML=null;
    // para="id="+bkid+"&projectname="+projectname;
    para="id="+ids;
    //url="lianxiAjax.jsp";
    url="/servletinout?do=queryID";

    XmlHttp.onreadystatechange=handleStateChange;
    XmlHttp.open("POST",url,true);

    XmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;");
    XmlHttp.send(para);
}

function handleStateChange() {
    if(XmlHttp.readyState==4){
        if(XmlHttp.status==200) {

            var arr = XmlHttp.responseText.split(",");
            projectnameT.value = arr[0];
            investorT.value = arr[1];
            moneyT.value = arr[3];
            investdate.value = arr[2];
            useforwhat.value = arr[4];

           if(arr[5]=="个人借款"){
               classification.options[0].selected=true;
           }

           if(arr[5]=="个人还款"){
                classification.options[1].selected=true;
            }

           if(arr[5]=="项目欠款"){
               classification.options[2].selected=true;
           }

           if(arr[5]=="项目回款"){
               classification.options[3].selected=true;
           }

            if(arr[5]=="应付个人"){
                classification.options[4].selected=true;
            }

            if(arr[5]=="已付个人"){
                classification.options[5].selected=true;
            }

        }
    }
}

function createXMLHttpRequest() {

    //IE
    try{
        xmlHttp=new ActiveXObject("Msxml.XMLHTTP");
    }
    catch (e) {
        try{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(oc){
            xmlHttp=null;
        }
    }

    //非IE浏览器下创建XMLHTTPRequest对象

    if(!xmlHttp&&typeof XMLHttpRequest!="undefined"){
        xmlHttp=new XMLHttpRequest();
    }

    return xmlHttp;
}

function returnlist() {
    window.location.href="inoutList.html";
}


举报

相关推荐

【汇智学堂】-AJAX+JAVA之二（新增数据前端界面）

AJAX+JAVAhtmlcssjavascriptHtml/CSS前端开发

【汇智学堂】-AJAX+JAVA之一（查询功能的前端页面）

AJAX+JAVAxmlhtmlcssJavaScript前端开发

【汇智学堂】-AJAX+JAVA之二（新增数据Servlet+DAO）

AJAX+JAVAsqlJavaScript前端开发

【汇智学堂】-AJAX+JAVA之五（分页的实现-Servlet+DAO）

AJAX+JAVAjavaListhtmlHarmonyOS后端开发

【汇智学堂】-AJAX+JAVA之一（查询功能的Entity+DAO）

AJAX+JAVAsqljavaListPython后端开发

【汇智学堂】Dubbo实战配置开发环境

dubbozookeeper大数据JAVA环境变量JavaScript前端开发

【汇智学堂】-Echart+JSP实现图形展示数据

JSP+Echart实现图形展示数据htmljson数组jQuery前端开发

【汇智学堂】Git使用入门之二

git暂存区版本管理HarmonyOS后端开发

【汇智学堂】-python四子棋小游戏之一--菜鸟版

python游戏开发小游戏JavaScript前端开发

【汇智学堂】-JS菜鸟版过河小游戏（之六---过河）

js过河小游戏v9v8初始化jQuery前端开发
0 条评论