解决jQuery提交优先form表单，不实现ajax事件

最新推荐文章于 2022-11-06 08:04:47 发布
最新推荐文章于 2022-11-06 08:04:47 发布
阅读量500 收藏
点赞数
文章标签： jquery ajax HTML 表单 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/denghaolinzy/article/details/87817927
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兑换码</title>
    <script src="/static/supplier/js/jquery-3.3.1.min.js"></script>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
</head>
<body>
<div class="header">
    <!--<div class="login_error"><span>兑换成功！</span></div>-->
</div>
<div id="a">
    <form name="form1" id="form1" class="key_form">
        <input type="text" name="cdkey" class="key" value="" placeholder="请输入兑换码" autocomplete="off">
        <input type="button" id="submit" class="key_sub" value="搜索">
    </form>
    <div id="content">

    </div>
</div>
</body>
</html>
<script>
    // $(function () {
        //查询CDK兑换信息
        //http://www.huafen.cn
        //http://'+host+'/supplier/key/product
        //{:url('admin/Datacollated/getDate')}
        //../../../../supplier/key/product
        //  host = location.host;
        $('#submit').on("click",function () {
            $.ajax({
                url:"http://www.huafen.cn/supplier/key/product",
                type:"post",
                cache:false,//上传文件不需要缓存
                dataType:'json',
                data:$("#form1").serialize(),
                success:function (data) {
                    if (data.data) {
                        var html='';
                        html = html+'<div class="key_body" >\n' +
                            '    <div class="user_info">\n' +
                            '        <p class="title">客户信息</p>\n' +
                            '        <div class="header">\n' +
                            '            <div class="head_img"><img src="'+data.data.user.head_img+'" title="客户"> </div><span>'+data.data.user.nickname+'</span>\n' +
                            '        </div>\n' +
                            '        <p>手机号码：'+data.data.user.phone+'</p>\n' +
                            '        <p>性别：'+data.data.user.sex+'</p>\n' +
                            '        <p>常住地：'+data.data.user.residence+'</p>\n' +
                            '    </div>\n' +
                            '    <div class="product">\n' +
                            '        <p class="title">兑换信息</p>\n' +
                            '        <div class="cdkey">\n' +
                            '            <div class="img">\n' +
                            '                <img src="'+data.data.product.product_img+'">\n' +
                            '            </div>\n' +
                            '            <div class="p_msg">\n' +
                            '                <div class="p_name">'+data.data.product.name+'</div>\n' +
                            '                <div class="p_content">'+data.data.product.content+'</div>\n' +
                            '            </div>\n' +
                            '        </div>\n' +
                            '        <form name="form2" id="form2">\n' +
                            '            <input type="text" name="cdkey_id" class="cdkey_hidden"  value="'+data.data.cdkey_id+'">\n' +
                            '         </form>\n' +
                            '            <input type="submit" class="change" value="兑换">\n' +
                            '    </div>\n' +
                            '</div>';
                        $("#content").empty("");
                        $("#content").html(html);
                    } else {
                        var kong = '';
                        kong+= "<div class=\"kong\">\n" +
                            "            <img src=\"/static/supplier/img/kong.png\" height=\"243\" width=\"464\"/>\n" +
                            "        </div>";
                        $("#content").empty();
                        $("#content").html(kong);
                        $(".kong").delay(2000).fadeOut()
                    }
                    return false;
                },error:function (data) {
                    var suc = '';
                    suc+= "<h3 id=\"suc_change\">请求失败!</h3>"
                    $("#content").empty();
                    $("#content").html(suc);
                    $('#suc_change').delay(2000).fadeOut();
                    return false;
                }
            });
            return false;
        });
    // })
    $(function () {
        //2.用户兑换
        //http://www.huafen.cn/supplier/key/changes
        $('#content').on("click",".change",function () {
            $.ajax({
                url:"http://www.huafen.cn/supplier/key/changes",
                type:"post",
                cache:false,//上传文件不需要缓存
                dataType:'json',
                data:$("#form2").serialize(),
                success:function (data) {
                    // console.log(data.msg)
                    if (data.msg == '兑换成功') {
                       var suc = '';
                       suc+= "<h3 id=\"suc_change\">兑换成功!</h3>"
                       $("#content").empty();
                       $("#content").html(suc);
                       $('#suc_change').delay(2000).fadeOut();
                    } else {
                        var kong = '';
                        kong+= "<div class=\"kong\">\n" +
                            "            <img src=\"/static/supplier/img/kong.png\" height=\"243\" width=\"464\"/>\n" +
                            "        </div>";
                        $("#content").empty();
                        $("#content").html(kong);
                        $('.kong').delay(2000).fadeOut();
                    }
                },error:function (data) { console.log(data)
                    var suc = '';
                    suc+= "<h3 id=\"suc_change\">请求失败</h3>"
                    $("#content").empty();
                    $("#content").html(suc);
                    $('#suc_change').delay(2000).fadeOut();
                    return false;
                }
            });
            return false;
        });
    })

</script>
<style>
    *{
        padding: 0px;margin: 0px;background: url('/static/supplier/img/BJ.png') no-repeat;font-family: MicrosoftYaHei;
    }
    #a{
        width: 650px;height: 600px;background: #fcfcfc;border-radius: 10px;
        position:absolute;left:0;top: 0;bottom: 0;right: 0;margin: auto;text-align: center;
    }
    #content{
        background:#fcfcfc;}
    #form2{background: #fcfcfc;}
    .user_info{
        margin-bottom: 5px;background: #fcfcfc;height: 178px;width: 95%;padding-top: 20px;text-align: left;border-bottom: 0.6px solid rgba(200, 200, 200, 0.43);
    }
    .title{
        font-size: 20px;line-height: 32px;color: #000000;text-align: left;background: #fcfcfc;
    }
    .user_info .title{
        font-size: 20px;line-height: 32px;color: #000000;margin-bottom: 5px;background: #fcfcfc;
    }
    .user_info p:not(first-child){
        font-size: 14px;color: #000000;height: 24px;background: #fcfcfc;
    }
    .header{
        display: inline-flex;flex-direction: row;align-items:center;margin-top: 10px;background: #fcfcfc;
    }
    .header span{
        font-size: 18px;background: #fcfcfc;color: #010101;
    }
    .head_img{
        width: 60px;height: 60px;border-radius: 100%;margin-right: 5px;
    }
    .head_img img{
        width: 100%;height: 100%;border-radius: 100%;
    }
    .key_body{
        margin: 0 auto;width: 512px;text-align: center;background: #fcfcfc;
        display: block;
    }
    .key_form{
        display: inline-flex;width: 512px; margin: 36px 0 10px 0;box-shadow: 0px 3px 7px 0px rgba(208, 208, 208, 0.55);
    }
    .key{
        width: 95%;height: 48px;border-radius: 4px 0 0 4px;padding-left: 5%;outline: none;border: none;background: #ffffff;
    }
    .key_sub{
        width: 72px;height: 48px;background: #1a98ff;border-radius: 0px 4px 4px 0px;outline: none;border: none;font-size: 20px;letter-spacing: 0px;color: #ffffff;cursor: pointer;
    }
    .product{
        width: 100%;margin-top: 15px;background: #fcfcfc;
    }
    .change{
        width: 250px;height: 60px;background: #1a98ff;border-radius: 30px;outline: none;text-align: center;border: none;font-size: 20px; line-height: 64px;color: #fcfcfc; letter-spacing: 0px;cursor: pointer;
    }
    .cdkey{
        font-size: 20px;width:450px;height: 95px;;background: #ffffff;box-shadow: 0px 3px 7px 0px rgba(208, 208, 208, 0.55);border-radius: 10px;
        margin: 10px 0 20px 0;padding: 4%;display: flex;
    }
    .cdkey .img{
        width: 132px;height: 100%;
    }
    .cdkey .img img{
        width: 100%;height: 100%;
    }
    .cdkey_hidden{display: none;}
    .p_msg{background: white;text-align: left;height: 100%;padding-left: 10px;flex-basis: auto;
        width: 318px;
        }
    .p_name{font-size: 16px;color: #000000;background: white; width: 318px;}
    .p_content{font-size: 14px;color: #7a7979;background: white;overflow: hidden;width: 318px;height: 80px;text-overflow:ellipsis;
       word-wrap:break-word;}
    .kong{width: 100%;height: 100%;background: #fcfcfc;}
    .kong img{width: 50%;height:50%;margin: 15% auto;}
    #suc_change{margin-top: 20%;background: #fcfcfc;font-size: 44px;color: #62ffaa;}
    .login_error{
        background: white;color: orange;border-radius: 20px;text-align: center;line-height: 53px;width: 532px;height: 53px; margin:3px auto;
        /*visibility: hidden;*/
        visibility: visible;
    }
    .login_error span{
        background: white;
    }
    .header{width: 100%;height: 53px;
        background: none;
    }
</style>
克雷莫纳的月光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery通过Ajax方式来提交Form表单的具体实现
10-26
提交Form表单的方法有很多，在本文为大家介绍下Jquery通过Ajax方式是如何提交Form表单的
jQuery ajax提交Form表单实例(附demo源码)
11-27
本文将详细讲解如何使用jQuery的`$.ajax`方法来提交Form表单，以及如何通过自定义函数实现更灵活的表单提交。 首先，传统的HTML Form表单提交会导致页面刷新，用户体验不佳。为了实现无刷新提交，我们可以利用...
前后台数据交互方式-非Ajax方式和Ajax方式
ye_yeye_ye的博客
04-19 1249
非Ajax方式 方式 没有使用Ajax对象发送的请求，都是非Ajax的。 常用的的非Ajax请求的方式有： from表单提交数据。 超链接发送请求。 window.localtion.href。 特点 浏览器发起的非Ajax请求，在后台处理完成后，浏览器再接收到此次请求的响应结果后，会覆盖当前页面，只显示新的相应结果。 注意 因为非Ajax请求的相应结果，被浏览器接收后会直接覆盖原有内容只显示新的，所以在后台处理完非Ajax请求处理，必须将处理结构和页面代码拼接好相应给浏览器 （请求转发/重定向/EL表
form表单的ajax提交
Arrowarcher的博客
02-14 156
$.ajax({ url: '{% url &amp;quot;save_all&amp;quot; %}', method: &amp;quot;post&amp;quot;, dataType: &amp;quot;json&amp;quot;, data: {'scan_id': scan_id, 'port_list': port_list}, headers: { 'X
jquery之form表单操作
weixin_67271870的博客
11-06 1570
下面所有操作以上面的代码为例。
jquery form表单提交
qq_33745371的博客
02-26 9909
使用jquery 进行form表单提交 文章目录使用jquery 进行form表单提交先上结果：代码html代码 ---index.htmljs代码---index.js代码用到的jquery.js、select2的css和js在我项目里面有下载地址 我这里使用了多选框（传输到后端时，用对象接收，里面有个属性是list） 如果暂时不会的话，可以看这篇博文—select2 单选框实现多选功能 先上结果： 代码 html代码 —index.html <!DOCTYPE html> <htm
jQuery实现form表单基于ajax无刷新提交方法实例代码
01-21
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法。分享给大家供大家参考，具体如下： 首先，新建Login.html页面： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
jQuery实现form表单基于ajax无刷新提交方法详解
10-23
jQuery 实现 form 表单基于 AJAX 无刷新提交是一种常见的前端技术，它允许用户在不刷新整个页面的情况下发送数据到服务器并接收响应。这提高了用户体验，因为页面的其他部分可以保持活动状态，而不会打断用户的操作...
jquery form提交的2种方式
svygh123的专栏
02-12 4664
1.序列化参数提交 $.ajax({ type: 'POST', url: url, data: $('#' + formId).serialize(), async: true, // true（异步）, false（同步） cache: false, contentType: false, processData: false, success: function(result) { console.log("ajax请
jquery.form提交方式
04-19
NULL 博文链接：https://meng-sicheng.iteye.com/blog/1874375
jQuery中form表单的基本使用
qq_36507046的博客
07-30 6002
本节内容主要介绍了jQuery中form表单的基本使用，同时附上了相应的的评论列表案例。
From表单的jquery方式提交
不以人人的意志为转义乃天道
05-11 1495
 jquery表单提交方法submit（）特别注意2014-07-28 19:18 1654人阅读 评论(0) 收藏 举报 分类： Jquery/javascript（35）  版权声明：本文为博主原创文章，未经博主允许不得转载。先看如下jQuery代码：[javascript] view plain copy print?function goPage(page){          $('#p...
jQuery提交Form
weixin_30654419的博客
07-23 92
<form id="result" name="result" action="/HelloStruts2/views/register.action" method="post"> <label>UserName</label> <input type="text" name="userBean.username" value="...
jquery 非ajax表单提交
长歌的博客
02-14 478
最近再写一个表单的时候，忽然不想用ajax向后台传值。记得jquery也有submit的方法，直接提交就完了。于是，开写代码。 <form id="myForm" action="url" method="post"> <div> 您的姓名 <label> ...
在当前页面处理form表单的方法（不跳转，不使用ajaxSubmit方法）
Q_M_X_D_D_的博客
05-21 1805
一般情况下，form提交之后是要跳转到另一个页面上做处理。其一般语法格式为： <form action="跳转页面" method="get" name="表单名称"> 表单数据项部分 </form> 但是在一些特殊情况下，我们想提交表单之后在当前页面处理数据，不想跳转。这种情况下，只需要将action属性去掉，让表单默认在当前页面处理。但是在处理表...
LayUI表单提交不走ajax原因
weixin_30498807的博客
02-13 1061
在使用layui的时候。遇到一个问题。提交表单，没有走ajax，直接提交了表单页面。 原因是因为JQuery未引入 解决办法。引入JQuery或者使用layui自带Jquery var $ = layui.jquery; 也可以直接引入官方的Jquery来和平常一样使用 <script type="text/javascript"> ...
form表单提交以及用Jquery实现ajax提交form表单
热门推荐
长江七号的博客
09-27 4万+
在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮（）就可以进行数据的提交，每一个input标签都需要有一个name属性，才能进行提交。 1、input[type=submit] input[type]默认值为text 设置type=submit后，输入控件会变成一个按钮，显示的文字为其value值。提交后会使用GET方式进
jQuery EasyUI 表单(Form)用法 ajax提交方法
最新发布
05-24
jQuery EasyUI 表单(Form)用法 ajax提交方法如下： 1.先定义一个表单，例如： ```html <form id="myForm" method="post"> 姓名: 年龄: 地址: </form> ``` 2.在JavaScript中使用ajax提交表单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值